Angularはオブジェクトを表示しません

debugcn 投稿 Dev

フレンク

だから私はウェブアプリケーションで忙しくて、今はオブジェクトの解析で立ち往生しています。私がやろうとしたのは、すべての結果のIDを取得することですが、コンソールに未定義が返されます。

私は何を試しましたか：

    var app = angular.module("DB", []);

    app.controller("Controller", function($scope, $http) {
      $http.defaults.headers.common["Accept"] = "application/json";
        $http.get('api_url').

        success(function(data, status, headers, config) {
          $scope.games = data.results;
          $scope.id = data.results.id; 
         //Do i need a foreach here because it doesn't loop through all records and it gives me undefined.

        $http.get('http:/api/id/' + $scope.id + '?api_key=', function(e){ 

        }).
          success(function(data, status, headers, config) {
            $scope.details = data;
            console.log(data);
            //this returns the complete JSON
          });
        }).
        error(function(data, status, headers, config) {
          //handle errors
      });
    });

最初のhttp.getは、次のようなJSONをループします。

"results": [
    {
    "easy": false,
    "id": 1,
    "title": "title",
    },
    {
    "easy": false,
    "id": 2,
    "title": "title",
    },
    {
    "easy": true,
    "id": 2,
    "title": "title",
    }
]

2番目に行う必要があるのは、JSONからすべてのIDを取得し、新しいGETを開始することです。

$http.get('http:/api/id/' + $scope.id + '?api_key=', function(e){ 

}).
  success(function(data, status, headers, config) {
    $scope.details = data;
    console.log(data.data);
  });
})

問題は、つまり、$scope.id = data.results.id;何も取得していないということです。すべてをループするために、foreachまたは何かが必要ですか？

そしてそれを表示してみました：

 <div ng-repeat="detail in details">
    {{ detail }}
    {{ detail.adult }}
</div>

ただし、何も表示されません（fyi iは、テストのために$ scope.id = data.results.id;を$ scope.id = data.results [0] .id;に変更しました）

2番目のGETのJSONは次のようになります。

{
  "adult": false,
  "collection": {
    "id": 131295,
    "name": "Collection",
  },
  "levels": [{
    "id": 28
  }, {
    "id": 12
  }, {
    "id": 878
  }],
  "homepage": "google",
  "id": 100402,
  "overview": "lorem ipsum"
}

たとえば、{{detail.adult}}でオブジェクトにアクセスできません。

ジョセップ

理由data.results.idので、何も返しませんがあるdata.resultsオブジェクトの配列です。必要なのがオブジェクトのIDを持つ配列であるdata.results場合は、次のように実行できます。

var resultIDs = data.results.map(function(result){return result.id;});

よくわかりませんが、これがあなたの望むものだと思います。

var app = angular.module("DB", []);

app.controller("Controller", function($scope, $http) {
  $scope.details = [];
  $http.defaults.headers.common["Accept"] = "application/json";
  $http.get('api_url').
  success(function(data, status, headers, config) {
      $scope.games = data.results;
      for(var i =0;i<$scope.games.lenght;i++){
         $http.get('http:/api/id/' + $scope.games[i].id + '?api_key=', function(e){ 

          }).
          success(function(data, status, headers, config) {
              $scope.details.push(data);
          });
       }
    }).
    error(function(data, status, headers, config) {
      //handle errors
  });
});

ただし、使用しているAPIに、単一のIDではなくIDの配列を受け入れるメソッドがあるかどうかを確認するので、そのように繰り返す必要はありません。

このAPIがRESTfulサービスである場合、次のように反復せずに実行できます。

var app = angular.module("DB", []);

app.controller("Controller", function($scope, $http) {
  $scope.details = [];
  $http.defaults.headers.common["Accept"] = "application/json";
  $http.get('api_url').
  success(function(data, status, headers, config) {
      $scope.games = data.results;
      var resultIDs = data.results.map(function(result){return result.id;});
       $http.get('http:/api?id=' + resultIDs.join(',') + '?api_key=', function(e){ 

       }).
       success(function(data, status, headers, config) {
            $scope.details = data;
       });
    }).
    error(function(data, status, headers, config) {
      //handle errors
  });
});