CODEWITHSUNDEEP
javascriptjsonangularjs
Rafael Rozon
Rafael Rozon

Reputation: 3019

Read JSON with Angular

Sorry if this is too simple, I am new to JSON and Angular. So, I have a server response in JSON that I don't quite understand and I need to read using AngularJS. This is the JSON.

{
    "$id": "1",
    "$values":
    [
        {
        "$id": "2",
         "ID": 2,
        "FiscalYear": "",
        "Month": 1,
        "Day": 1,
        "Surname": "test",
        "FirstName": "test",
        "Program": "smart",
        "PoliceFileNumber": "123",
        "CourtFileNumber": 123,
        "Service": "1",
        "VictimOfIncident": "yes",
        "FamilyVoilenceFile": "123",
        "Gender": "M",
        "Ethnicity": "1",
        "Age": "22",
        "AssignedWorker": 1,
        "StatusOfFile": 1
        }
   ]
}

This represent a query from a table in my database.

1) What I don't understand is why it's included the id and values at the beginning?

2) How do I access the variables inside values? For example, how do read the Month value?

In the server I have this:

 public class ClientDTOesController : ApiController
 {
    private LookupContext db = new LookupContext();

    // GET: api/ClientDTOes
    public IQueryable<ClientDTO> GetClientsDTO()
    {

       return db.ClientsDTO;
    }

And this is my model:

public partial class ClientDTO
{
    public int ID { get; set; }

    public String FiscalYear { get; set; }

    public int Month { get; set; }

    public int Day { get; set; }

    public string Surname { get; set; }

    public string FirstName { get; set; }

    public String Program { get; set; }

    public string PoliceFileNumber { get; set; }

    public int CourtFileNumber { get; set; }

    public String Service { get; set; }

    public String VictimOfIncident { get; set; }

    public String FamilyVoilenceFile { get; set; }

    public string Gender { get; set; }

    public String Ethnicity { get; set; }

    public String Age { get; set; }

    public int AssignedWorker { get; set; }

    public int StatusOfFile { get; set; }

}

My Client code:

    (function () {

    // creates a module and register to the app
    var app = angular.module('ReportViewer', []);

    // controller declaration
    var MainController = function ($scope, ReportService) {

        // object model
        var _Client = {
            Age: "",
            CourtFileNumber: "",
            Day: "",
            Ethnicity: "",
            FamilyVoilenceFile: "",
            FirstName: "",
            FiscalYear: "",
            Gender: "",
            Month: "",
            PoliceFileNumber: "",
            Program: "",
            Service: "",
            Surname: "",
            VictimOfIncident: ""
        };

        // GET ALL
        var onGetAllComplete = function (data) {
            $scope.clients = data;
        };

        var onGetAllError = function (reason) {
            $scope.error = "Could not get all clients.";
        };

        // accessed from the view
        // calls the service function
        $scope.getClient = function () {
            ReportService.getAllClients()
                    .then(onGetAllComplete, onGetAllError);
        };

        // exposes the 'object'
        $scope.client = _Client;
    };

    //register the controller to the app
    app.controller("MainController", MainController);
}());

And the service:

    // ReportService.js

(function () {

    var ReportService = function ($http) {

        var baseUrl = 'http://localhost:16188/api/Report/ReportClient/1/1';

        var _getAllClients = function () {
            return $http.get(baseUrl)
              .then(function (response) {
                  return response.data
              });
        };

        return {
            getAllClients: _getAllClients
        };
    };

    var module = angular.module("ReportViewer");
    module.factory("ReportService", ReportService);
}());

I am trying to display the values here:

    <!DOCTYPE html>
<html data-ng-app="ReportViewer">
<head>
    <title>Report</title>
    <script src="../Scripts/AngularJS/angular.js"></script>

    <script src="../Scripts/App/MainController.js"></script>
    <script src="../Scripts/App/ReportService.js"></script>


</head>
<body data-ng-controller="MainController">
    <div id="wrapper" class="container">
        <div class="summary">
            <h1>Worker summary & detail report</h1>
            <button ng-click="getClient()">Get All Clients</button>
            <div id="test" ng-show="clients" >
                <p>{{client.courtFileNumber}}</p>
                <p>{{client.Day}}</p>
                <p>{{client.Ethnicity}}</p>
                <p>{{client.FamilyVoilenceFile}}</p>
                <p>{{client.FirstName}}</p>
                <p>{{client.FiscalYear}}</p>
                <p>{{client.Gender}}</p>
                <p>{{client.Month}}</p>
                <p>{{client.PoliceFileNumber}}</p>
                <p>{{client.Program}}</p>
                <p>{{client.Service}}</p>
                <p>{{client.Surname}}</p>
                <p>{{client.VictimOfIncident}}</p>
            </div>

Thank you very much for any suggestions.

Upvotes: 1

Views: 569

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Your code looks perfect, basically problem is with you HTML, you could use ng-repeat which act as like for loop which will loop through all clients and show it.

Markup

<div id="test" ng-repeat="client in clients.$values">
    <p>{{client.courtFileNumber}}</p>
    <p>{{client.Day}}</p>
    <p>{{client.Ethnicity}}</p>
    <p>{{client.FamilyVoilenceFile}}</p>
    <p>{{client.FirstName}}</p>
    <p>{{client.FiscalYear}}</p>
    <p>{{client.Gender}}</p>
    <p>{{client.Month}}</p>
    <p>{{client.PoliceFileNumber}}</p>
    <p>{{client.Program}}</p>
    <p>{{client.Service}}</p>
    <p>{{client.Surname}}</p>
    <p>{{client.VictimOfIncident}}</p>
</div>

Upvotes: 1

Related Questions