Ionicフレームワークでng-repeatを使用してネストされたJSONオブジェクトを表示する方法は？

Question

私はIonicフレームワークを使用してシンプルなハイブリッドモバイルアプリを開発しています。姓を検索すると、一致するすべての姓を検索するGET要求が送信され、対応するIDが表示されます。 JSONオブジェクトから返されたデータを表示する際に問題が発生しています。

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

次が正常に私は必要なすべてが移入JSONオブジェクトを返すのjsファイルです：

以下はHTMLページです。

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オブジェクトを反復していると思います。何らかの理由でデータは表示されませんが、コンソールを見るときにオブジェクトが確実に表示されます。私が間違ってやっていることの助けや方向性は、私がこれを初めて知り、これを行う正しい方法を見つけようとしているので、非常に感謝しています。

編集： ionicフレームワークが提供するコレクションリピートを使用してみましたが、スタック制限エラーが発生しました。

Answer 1

response.dataに$scope.resultsを割り当てるときは、文字通りHTTPの応答本文を割り当てます。これは、あなたの質問にあるJSONオブジェクト全体です。これらのアカウントを使用してng-repeatにする場合は、実際にはresponse.data.response.accを指す必要があります。

テンプレートでは、$がresultsの前になく、ng-repeat="user in results"である必要があります。

あなたのJSONオブジェクトが配列としてアカウントごとidを示しています、私はそうしないNG-繰り返しにあなたは印刷せずに実際の印刷に値を{{user.id[0]}}を使用する必要があります、ちょうど配列なしでリテラル値を与えるお勧めします配列そのもの。再びすぐにこの時のハードを見て連れて行く、http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview