为什么只从JSON列表中显示第一行

Question

我有下表：

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
        <form>
            <table>
                <tr>
                    <td><b>ID</b></td>
                    <td><b>Name</b></td>
                    <td><b>Surname</b></td>
                    <td><b>House</b></td>
                    <td><b>Address</b></td>
                    <td><b>Locality</b></td>
                    <td><b>Contact1</b></td>
                    <td><b>Contact2</b></td>
                    <td><b>Contact3</b></td>
                    <td><b>Reply</b></td>
                </tr>
                <tr><td></td></tr>
                <tr ng-repeat="telesale in telesales">
                    <td>{{telesale.ID}}</td>
                    <td>{{telesale.Name}}</td>
                    <td>{{telesale.Surname}}</td>
                    <td>{{telesale.House}}</td>
                    <td>{{telesale.Address}}</td>
                    <td>{{telesale.Locality}}</td>
                    <td>{{telesale.Contact1}}</td>
                    <td>{{telesale.Contact2}}</td>
                    <td>{{telesale.Contact3}}</td>
                    <td>{{telesale.Reply}}</td>
                </tr>
            </table>
        </form>
    </div>
  </div>

控制器：

<script type="text/javascript">
  var myApp = angular.module('myApp', []);

  myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {

      GetPersons();

      function GetPersons() {
          $http({
              method: 'GET',

              url: '/api/data'
          }).
        success(function (data) {
            if (data != null || data != 'undefined') {
                console.log(data);
                $scope.telesales = data;
            }
        })
      .error(function (error) {
          $window.alert("Unable to retrieve people" + error.message);
      });
      }

  } ]);

正在从api控制器检索数据，该控制器返回40个对象的列表，但是只有第一个对象显示在表中。为什么会发生这种情况？

从api检索到的一些数据的屏幕截图（为隐私而划掉的数据）

看起来好像第二个（和其他对象）作为另一个表

的外键的地点传递

API代码：

public HttpResponseMessage GetPeople()
    {
        List<CommonLayer.Telesales> list = new BusinessLayer.Telesales().getUserSession(User.Identity.Name);
        //List<CommonLayer.Localities> list = new BusinessLayer.Localities().getAllLocalities();
        if (list.Count > 1)
        {
            return new HttpResponseMessage()
            {
                Content = new StringContent(JArray.FromObject(list).ToString(), Encoding.UTF8, "application/json")
            };
        }
        else
        {
            return null;
        }
    }

Plunkr

Answer 1

您的问题是，当您加载Localities导航属性时，您还要加载相关的Telesales。

换句话说，整个 Telesales表只是在加载它的第一个对象时加载，因为它的导航属性Localities反过来加载所有Telesales与之相关，因此您将整个表Telesales加载到导航属性Localities中。然后，当web-api尝试获取其他Telesales个对象时，它会发现它们都已加载并用$ref : RowId替换它

因此，您需要重新考虑您的查询，以免加载Localities导航属性。

<强> 声明

您可以尝试在jsoneditoronline之类的工具中解析您的JSON数据，以查看从服务器获取的内容的漂亮表示

Answer 2

请见http://plnkr.co/edit/fLb9VHrGNqMtouK3dMca?p=preview 工作正常，但你应该调整你的api以获得更好格式的数据

 function GetPersons() {
              $http({
                  method: 'GET',

                  url: 'data.json'
              }).
            success(function (data) {
              console.log(data)
                if (data != null || data != 'undefined') {
                    console.log(data[0].Localities.Telesales);
                    $scope.telesales = data[0].Localities.Telesales;
                }
            })
          .error(function (error) {
              alert("Unable to retrieve people" + error.message);
          });
          }