Read JSON with Angular

Question

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.

I would recommend you to separate the two problems(server-side and client-side) you have faced. At first you should solve the server side problem that you couldn't create the json response you really want without mixing with client angularjs code. This suggestion would change your qustion title and tags so that it would become easy to receive the answer for your server-side problem. — yazaki
– yazaki, Commented Apr 6, 2015 at 4:56
Just a suggestion for other users. To figure out how to read the JSON above, I made a simple html page with a script tag and assigned the JSON data to a variable. Then, using the browser console I could use the variable to navigate thought its properties. For example, assuming the variable is called info: info.$values[0].PropertyName. — Rafael Rozon
– Rafael Rozon, Commented Apr 6, 2015 at 22:15

Pankaj Parkar · Accepted Answer · 2015-04-06 06:25:43Z

1

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>

answered Apr 6, 2015 at 6:25

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cst1992 Over a year ago

@RafaelRozon If this answer solved your problem, mark it as accepted by clicking the grey tickmark.

Collectives™ on Stack Overflow

Read JSON with Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related