Angular won't display object

Question

So i'm busy with a webapplication and i'm stuck now with parsing an object. What I just tried to do is getting the ID of all results but it gives me undefined back in my console.

What did i try:

    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
      });
    });

the first http.get loops through a JSON like:

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

and what the second on needs to do is get all of the ID's from the JSON and start a new 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);
  });
}) 

the problem is that is, is that $scope.id = data.results.id; is returing nothing, do i need a foreach or something to loop through it all?

And displaying it i did try:

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

but is does not display anything (fyi i changed $scope.id = data.results.id; to $scope.id = data.results[0].id; to test it)

the JSON for the second GET looks like:

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

i can't access the object with {{ detail.adult }} for example.

Answer 1

The reason why data.results.id is returning nothing is because data.results is an Array of objects. If what you want is an Array with the IDs of the objects of data.results you could do it like this:

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

I'm not sure, but I think that this is what you want:

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
  });
});

However I would check if the API that you are using has a method that accepts an array of IDs instead of a single ID, so that you don't have to iterate like that.

If this API is a RESTful service you could do it without iterating, like this:

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
  });
});