Parse JSON list using angularJS(ng-repeat) only getting last row

Question

I am creating a simple web API project and trying to access that API response using angularjs. In web API project I have following two classes.

public partial class Employee : BaseEntity
{
    public System.Guid EmpId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public System.DateTime BirthDate { get; set; }
    public string EmailId { get; set; }
    public string ContactNumber { get; set; }
    public string Address { get; set; }
    public System.Guid DeptId { get; set; }
   // public System.DateTime LastModify { get; set; }

    public virtual Department Department { get; set; }
}

and

public partial class Department : BaseEntity
{
    public Department()
    {
        this.Employees = new HashSet<Employee>();
    }

    public System.Guid DeptId { get; set; }
    public string Name { get; set; }

    public virtual ICollection<Employee> Employees { get; set; }
}

I have created a get method like

// GET: api/Employees
    public IQueryable<Employee> GetEmployees()
    {
        return _db.Employees;
    }

I run the project and it's working fine but I am getting the response like

[
{
    "$id": "1",
    "Department": {
        "$id": "2",
        "Employees": [
            {
                "$ref": "1"
            },
            {
                "$id": "3",
                "Department": {
                    "$ref": "2"
                },
                "EmpId": "2fd221ec-c605-4c88-9d60-675e30f1bf8b",
                "FirstName": "Namit",
                "LastName": "Kumar",
                "BirthDate": "1990-06-26T00:00:00",
                "EmailId": "namit@gmaiil.com",
                "ContactNumber": "9052390048",
                "Address": "Mumbai",
                "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
                "DateCreated": null,
                "UserCreated": null,
                "LastModify": "2016-06-26T12:42:20.66",
                "UserModified": null
            },
            {
                "$id": "4",
                "Department": {
                    "$ref": "2"
                },
                "EmpId": "b2b8dede-5635-4879-86d6-8bca346b30e8",
                "FirstName": "Manish",
                "LastName": "Kumar",
                "BirthDate": "1990-12-07T00:00:00",
                "EmailId": "manishki@live.com",
                "ContactNumber": "9052390048",
                "Address": "Hyderabad",
                "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
                "DateCreated": null,
                "UserCreated": null,
                "LastModify": "2016-06-26T10:34:58.57",
                "UserModified": null
            }
        ],
        "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
        "Name": "Information Technology (IT) ",
        "DateCreated": null,
        "UserCreated": null,
        "LastModify": "2016-06-26T10:33:07.19",
        "UserModified": null
    },
    "EmpId": "7448ce2b-577d-4ccb-8ab5-1c9a51cda6f4",
    "FirstName": "xyz",
    "LastName": "abc",
    "BirthDate": "1991-03-17T00:00:00",
    "EmailId": "manishki@live.com",
    "ContactNumber": "0000000000",
    "Address": "BGP",
    "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
    "DateCreated": null,
    "UserCreated": null,
    "LastModify": "2016-06-26T19:03:53.307",
    "UserModified": null
},
{
    "$ref": "3"
},
{
    "$ref": "4"
}
]

In another angular project I have created simple controller like

(function(app) {  
var listController = function ($scope, $http) {

   $http.get("http://..../api/Employees").then(function (data) {
       $scope.employees = data;


   });   



 };
   app.controller("listController", listController);  
}(angular.module("empDemo")));

and In html I am trying to display the response using following code

 <div class="table-responsive" ng-controller="listController">
      <!--{{employees.Department.data}}-->

            <table class="table table-bordered">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Birth Date</th>
                    <th>Email</th>
                    <th>Contact Number</th>
                    <th>Address</th>
                    <th>Department</th>
                </tr>
            </thead>
                <tbody>

                    <tr ng-repeat="employee in employees.data">
                        <td>{{employee.FirstName}}</td>
                        <td>{{employee.LastName}}</td>
                        <td>{{employee.BirthDate}}</td>
                        <td>{{employee.EmailId}}</td>
                        <td>{{employee.ContactNumber}}</td>
                        <td>{{employee.Address}}</td>
                        <td>{{employee.Department.Name}}</td>
                    </tr>
                </tbody>
        </table>

When I run the List.html I am always getting the last row only. Please guide me how to get all the rows. Here I am not sure, I am getting a wrong response form my service or I am missing something while I am parsing the response using angularJS.

The response you get is odd, On the highest level in your array you have 3 objects: 1 with properties: $id, department, EmpId, FirstName, etc... 2 with only property $ref. Those are bound in ng-repeat. Only the first object has the properties you show in html — Norbert Huurnink, Jun 26 '16 at 14:37
yes I know that but I wanted to know how to get correct response or by using above response how to display all the data — MANISH KUMAR CHOUDHARY, Jun 26 '16 at 14:39
You seem to be getting 1 employee in your _db.Employees call, is that what it's supposed to do? Working with these reponses in your client code is far from great, don't try to restore this in angular. — Norbert Huurnink, Jun 26 '16 at 14:48
@MANISH , could u restructure your json data Because it could help u getting the required output — Shikha thakur, Jun 26 '16 at 14:51

Parse JSON list using angularJS(ng-repeat) only getting last row

0 Answers0