如何使用带有Ionic框架的ng-repeat显示嵌套的JSON对象?

时间:2016-09-08 02:36:49

标签: javascript angularjs json ionic-framework

我正在使用Ionic框架开发一个简单的混合移动应用程序。当您搜索姓氏时,会发送GET请求以检索所有匹配的姓氏,然后显示其相应的ID。我在显示来自JSON对象的返回数据时遇到问题。

以下是html页面:

<ion-view view-title="Account" ng-controller="AccountCtrl">
<ion-content>
    <div class="list">
        <div class="item item-input-inset">
            <label class="item-input-wrapper">
                <input type="text" placeholder="Search" ng-model="name">
            </label>
            <button class="button button-small" ng-click="searchUser(name)">
                Go
            </button>
        </div>
    </div>
    <div>
        <ul ng-repeat="user in $results">
            <li>{{user.id}}</li>
        </ul>
    </div>
</ion-content>

接下来是js文件,它成功返回一个填充的JSON对象,其中包含我需要的所有内容。

angular.module('starter.controllers', [])

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

$scope.searchUser = function (name) {
    $http.get('https://notrelevantforthis/searchLastName?=' + name).then(function (response) {
        console.log(response.data)

        //Assign JSON obj to results to repeat through and display data
        $scope.results = response.data;

        //To show the actual JSON object is returned
        //var jsonStr = JSON.stringify($scope.results);
        //document.body.innerHTML = jsonStr;

    }, function (error) {
        console.log(error)
    });
};
}]);

现在重要的部分是JSON对象本身的结构。我认为这是我感到困惑的地方。结构如下:

{
"response": {
  "totalFound": 275,
  "start": 0,
  "acc": [
    {
      "id": [
        "1"
      ],
      "first_name": [
        "Joe"
      ],
      "last_name": [
        "Smith"
      ]
    },
    {
      "id": [
        "2"
      ],
      "first_name": [
        "John"
      ],
      "last_name": [
        "Doe"
      ]
   }]}
}

我的问题是使用ng-repeat迭代JSON对象。由于某些原因,没有显示任何数据,但在查看控制台时,该对象肯定存在。任何帮助或指导我的错误都会非常感激,因为我是新手并且一直试图找到正确的方法。

修改 尝试使用离子框架提供的集合重复,但是出现了堆栈限制错误。

1 个答案:

答案 0 :(得分:1)

当您将response.data分配给$scope.results时,您实际上是在为其分配HTTP的响应主体,这是您在问题中拥有的整个JSON对象。如果您希望通过这些帐户response.data.response.acc,则需要实际指向ng-repeat

在您的模板中,它应该是ng-repeat="user in results"$前面没有results

您的JSON对象将每个帐户的id列为数组,我建议您只提供不带数组的文字值,否则在ng-repeat中您必须使用{{user.id[0]}}实际打印值而不打印数组本身。

我在这里为您创建了一个示例:http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview