ionic/angularJSのWebサービスからデータを取得して表示

Question

ionic/AngularJSを使用してアプリケーションを構築しています。 Webサービスコールをテストするには、私はベストバイサービスを使用しています。応答は次のとおりです。

{ 
    "from": 1, 
    "to": 10, 
    "total": 4665, 
    "currentPage": 1, 
    "totalPages": 467, 
    "queryTime": "0.009", 
    "totalTime": "0.045", 
    "partial": false, 
    "canonicalUrl": "/v1/categories?format=json&apiKey=****", 
    "categories": [ 
    { 
     "id": "abcat0010000", 
     "name": "Gift Ideas", 
     "active": true, 
     "path": [ 
     { 
      "id": "cat00000", 
      "name": "Best Buy" 
     }, 
     { 
      "id": "abcat0010000", 
      "name": "Gift Ideas" 
     } 
     ], 
     "subCategories": [ 
     { 
      "id": "pcmcat140000050035", 
      "name": "Capturing Photos & Videos" 
     }, 
     { 
      "id": "pcmcat140000050036", 
      "name": "Listening to Digital Music" 
     }, 
     { 
      "id": "pcmcat140000050037", 
      "name": "Computing Made Easy" 
     }, 
     { 
      "id": "pcmcat140000050039", 
      "name": "Simple GPS Navigation" 
     }, 
     { 
      "id": "pcmcat140000050040", 
      "name": "Playing Video Games" 
     }, 
     { 
      "id": "pcmcat140000050041", 
      "name": "Watching HDTV" 
     }, 
    ......... 

この情報をデバイスのリストとして取得して表示するにはどうすればよいですか？私は$ httpサービス要求を認識していますが、これをイオンリストにどのように組み込むのですか？

Answer 1

すでにデータを取得するロジックを記述しているとしますが、これはと書いてion-listを実装しています。

Answer 2

あなたのリストに名前フィールドを表示するとしましょう。

app.js

var baseURL="*here your json request*"; 

var categoriesName=[]; 

$http.get('baseURL') 
.success(function(response){ 

    $scope.objectResponse = response.categories; 
    console.log($scope.objectResponse); 

    $scope.objectResponse.forEach(function(item) { 
    categoriesName.push(item.name); 
    console.log(categoriesName); 
}) 

.error(function(response){ 
    console.log(response); 
}); 

HTML

<ul class="list"> 
    <li class="item" ng-repeat="listname in categoriesName"> 
     {{listname}} 
    </li> 
</ul> 

これはあなたのデバイス上のリストとしてこの情報を取得し、表示することができますどのようです。