AngularJS 当 API returns 一个对象时，ng-repeater 无法正确读取 json

Question

我正在研究angularjs和web.apiv2 并调用一个简单的 API 来获取联系人列表，使用以下代码：

   $scope.GetAllContacts = function () {
    $http.get('http://localhost:50820/api/contacts').
    success(function (data, status, headers, config) {
        $scope.contacts = data;
        // OUT PUT WILL BE [{contact1},{contact2},....]
    }).
    error(function (data, status, headers, config) {
        alert("couldn't get contacts.");
    });
  }

每个联系人对象都有（ID、姓名、姓氏、电子邮件）。

这是我的 HTML 页面

    <content ng-controller="ContactController">
        <table border="1">
            <tr ng-repeat="contact in contacts">
                <td>{{contact.Id}}</td>
                <td>{{contact.Name}}</td>
                <td>{{contact.LastName}}</td>
                <td>{{contact.Email}}</td>
            </tr>
        </table>
    </content>

Problem happens when API returns only 1 record, like {contact1} Like this {"Id":1,"Name":"James","LastName":"Oliver","Email":"james.oliver@gmail.com"}

此时angularjs会将其视为具有4条记录的JSON对象，例如[{ID},{Name},{Lastname},{Email}]

因此 Ng-Repeater 无法找到 contact.id、contact.name、contact.lastname 或 contact.email。

我不确定，是因为ASP.Net API 返回格式错误，还是我需要使用其他方法？？

我已经尝试了 JSON.parse 和 Angular.toJson 但没有成功。

Answer 1

我认为您可以在成功函数中检查您从 Web 服务收到的响应数据。

console.log(data);

如果它以下面的格式打印，那么 ng-repeater 将能够找到单个对象。

[{"Id":1,"Name":"James","LastName":"Oliver","Email":"james.oliver@gmail.com"}]

但是如果你收到如下数据。

{"Id":1,"Name":"James","LastName":"Oliver","Email":"james.oliver@gmail.com"}

然后 ng-repeater 将无法找到它（也许您应该检查您的服务器端）。

看，我在 JSFiddle

做了一个快速测试

Answer 2

发现了问题，我有两种不同的方法，

    GetAllContacts()  //returns a collection of contacts
    GetContact(int id) // return a single contact object

在 fiddler 中，两个响应都正常，因为它们被检测为 JSON 对象，但是 Ng-Repeater 将单个对象视为具有 4 个对象的 JSON（因为 4 属性), 而不是将其视为一个对象。

所以我所做的是将单个联系人对象放入一个集合中，然后 return 结果作为一个只有一个记录的集合。它解决了这个问题。

AngularJS 当 API returns 一个对象时，ng-repeater 无法正确读取 json

AngularJS ng-repeater not able to read json properly when API returns one object

api

parsing

json

response

angularjs-ng-repeat