2016-12-05 94 views
0

質問が更新され、解決策が提供されました。 私はhttps://filters.rocks/embed/466.jsonからjsonフィードを取得しています。空白値を表示するng-repeat

jsonは私の範囲に入っていますが、私はそれを私の前のタグで見ることができますが、何らかの理由で私のng-repeatを入力していません。

app.controller('InstagramCtrl', ['$scope', '$http', 
function($scope, $http) { 
    $scope.items = []; 
    $http.get('https://filters.rocks/embed/466.json').then(function(response) { 
      $scope.items = response; 
      instagramSuccess($scope, $scope.items); 

    }); 

    var instagramSuccess = function(scope, response) { 
     if (response.data.length <= 0) { 
      $scope.error = response.meta.error_type + ' | ' + response.meta.error_message; 
      return; 
     } 
     if (response.data.length > 0) { 
      $scope.items = response.data; 

     } else { 
      $scope.error = "This hashtag has returned no results"; 
     } 
    }; 

} 
]); 

HTML

<div class="container" ng-controller="InstagramCtrl"> 

    <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 

       </div> 
       <div class="panel-body"> 
        <ul class="instagram-list" ng-repeat="item in items">  
         <li> 
          <small>{{item.data.feed.id}}</small> 
          <img ng-src="{{item.data.feed.approved_images.medium}}" width="250"> 
         </li> 

        </ul>      
       </div> 
       <pre> filter.rocks {{ items | json }} </pre> 
      </div> 
     </div>   
    </div> 

更新 私は皆からこまごまとを取り、これで終わりました。 madhairsilenceが示されているようにそれがないときに、それが配列であるかのように コントローラ

$scope.items = []; 

     $http.get('https://filters.rocks/embed/466.json').then(function(response) { 

      instagramSuccess(response); 

    }); 

    var instagramSuccess = function(response) { 
     if (!response.data) { 
      $scope.error = response.meta.error_type + ' | ' + response.meta.error_message; 
      return; 
     } 
     // check if data is defined if so, check objects are defined, then if array is defined. 
     if (response.data && response.data.feed && response.data.feed.approved_images && response.data.feed.approved_images.length) { 
      //if all good $scope.items becomes array 
      $scope.items = response.data.feed.approved_images; 

     } else { 
      $scope.error = "This hashtag has returned no results"; 
     } 
    }; 

HTML

    <ul class="instagram-list" ng-repeat="item in items">  
         <li class="instagram-item"> 
          <small style="color:blue;">{{item.id}}</small> 
          <div bg-img="{{item.medium}}" width="250"></div> 
         </li> 
        </ul> 
+1

{{items}}を印刷して、適切な子属性を呼び出すかどうかを確認してください。 Mapを受け取るのはよくある間違いですが、それをListとして繰り返します。 – madhairsilence

答えて

2

は、あなたがアイテムを扱っています。あなたはのようにapproved_imagesて繰り返すように見ていることがあります。

<ul class="instagram-list" ng-repeat="item in items.feed.approved_images">  
    <li> 
     <small>{{item.id}}</small> 
     <img ng-src="{{item.medium}}" width="250"> 
    </li> 
</ul> 
+0

オブジェクトが長さ0またはnullを返すことを完全に忘れています。私はあなたのロジックを使って得た解決策で私の質問を更新し、少し修正しました。 – Brendan

1
内容を以下にあなたのHTMLを変更

...あなたのcontroller..youには何も変更する必要は間違った項目に

<div class="panel-body"> 
      <ul class="instagram-list" ng-repeat="item in items.data.feed.approved_images">  
       <li> 
        <small>{{item.id}}</small> 
        <img ng-src="{{item.medium}}" width="250"> 
       </li> 

     </ul>      
    </div> 
をループされていません
+0

あなたのアイデアを広げ、私のエラーチェックに追加しました。 – Brendan

+0

はい。長さを確認する –

関連する問題