1

シンプルな Web API プロジェクトを作成し、angularjs を使用してその API 応答にアクセスしようとしています。Web API プロジェクトには、次の 2 つのクラスがあります。

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; }
}

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; }
}

次のようなgetメソッドを作成しました

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

私はプロジェクトを実行し、正常に動作していますが、次のような応答を得ています

[
{
    "$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"
}
]

別の角度プロジェクトでは、次のような単純なコントローラーを作成しました

(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")));

そしてhtmlでは、次のコードを使用して応答を表示しようとしています

 <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>

List.html を実行すると、常に最後の行のみが取得されます。すべての行を取得する方法を教えてください。サービスから間違った応答を受け取っているか、angularJS を使用して応答を解析しているときに何かが欠落しています。

4

0 に答える 0