AngularJS chaining $ http получить запросы

Question

Новый угловой. Я пытаюсь вызвать несколько вызовов $ http get и второй вызов в зависимости от результата и проанализировал JSON первого из них следующим образом:

1) Сделайте запрос $ http get, чтобы получить JSON с массивом таких элементов, как ["album 1", "album2"]

2) Прокрутите каждый элемент массива и выполните другой запрос $ http get, чтобы получить информацию о треке для этого альбома.

Вот код контроллера для того же самого (неполные), где я хочу, чтобы достичь этого:

var vm = this; 
    vm.albums = init; 
    vm.albums.tracks = albumTracks; 
    vm.newFunction = newFunction; 

    return init(); 

    return albumTracks(); 

    function init(){ 

     $http.get('http://localhost:8080/api/albums').then(function(responseData){ 
      // Parse the json data here and display it in the UI 
      vm.albums = responseData; 
      $log.debug(angular.toJson(responseData, true)); 

     // For every album, do another get call in the function albumTracks 
      for(var i=0; i<vm.albums.length; i++){ 
       vm.albums.tracks = []; 
       vm.albums.tracks.push(albumTracks(vm.albums[i])); 
       console.log(vm.albums.tracks); // This prints on the console as [undefined] 
      } 

      console.log(vm.albums.tracks); 
      return vm.albums; 
     }) 
    } 

    function albumTracks(album){ 
     $http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){ 
      //parse each album and get the track list 
      vm.albums.tracks = trackResponse; 
      return vm.albums.tracks; 
     }) 
    } 

Вот как каждый ответ JSON выглядит следующим образом:

//http://localhost:8080/api/albums/: 
[ 
    "the-revenant-original-motion-picture-soundtrack", 
    "twilight-of-the-ghosts" 
] 

//http://localhost:8080/api/albums/twilight-of-the-ghosts: 
[ 
{ 
"fileName": "twilight-of-the-ghosts-twilight-of-the-ghosts-01-pinned-to-the-mattress.flac", 
"title": "Pinned to the Mattress", 
"artists": "Twilight of the Ghosts", 
"album": "Twilight of the Ghosts", 
"sequenceNumber": 1, 
"trackLength": 274 
}, 
{ 
"fileName": "twilight-of-the-ghosts-twilight-of-the-ghosts-02-sinking-slowly-slowly-sinking.flac", 
"title": "Sinking Slowly Slowly Sinking", 
"artists": "Twilight of the Ghosts", 
"album": "Twilight of the Ghosts", 
"sequenceNumber": 2, 
"trackLength": 270 
} 
and so on 

Answer 1

В настоящее время вы перезаписать tracks с каждым tracksResponse. Вы можете сделать:

vm.album.tracks = vm.album.tracks.concat(trackResponse); 

Вместо этого, вы хотите, чтобы связать альбомы и треки, так что используйте массив объектов для альбомов вместо массива строк:

vm.albums = responseData.map(album => ({name: album, tracks: []})); 

Затем вы будет проходить в объекте альбома, который вы можете обновить после запроса треков:

album.tracks = trackResponse; 

в console.log s не будет работать там, где вы их, потому что $http является асинхронный.

let a = "a"; 
$http.get(() => a = "b"); 
console.log(a); // logs "a" even though it was written after `a = "b"` 

Это означает, что если вы в зависимости от реакции $http запроса на все, что вы должны сделать эту работу в функции обратного вызова запроса. Вероятно, вам не нужно это делать в этом случае, поскольку обновление vm должно автоматически обновлять ваши шаблоны из-за того, как работает Angular.

Answer 2

По моим знаниям Вы, возможно, потребуется угловой петли вместо «for'loop , где вы можете прикрепить трекеры с еще немного кодирования и хаоса.

vm.albumsWithTrackers = []; // New Variable Defining needed. 

//http://localhost:8080/api/albums/: // it is fine Json but with some define attributes it looks good 
       [ 
        "the-revenant-original-motion-picture-soundtrack", 
        "twilight-of-the-ghosts" 
       ] 

     // Albums With attributes Defined :- 

     [ 
      "id":"the-revenant-original-motion-picture-soundtrack", 
      "id":"twilight-of-the-ghosts" 
     ] 

     angular.forEach(vm.albums, function (album, key) { 
        album.tracks.push(albumTracks(album)); // attaching only trackers to current album on loop 
        vm.albumsWithTrackers.push(album); // pushing Album to new defined variable 
        console.log(album.tracks); 
        }); 
       }); 
       console.log(vm.albumsWithTrackers);//album with attached trackers. 
      return vm.albumsWithTrackers; 

    function albumTracks(album){ 
      $http.get('http://localhost:8080/api/albums/'+album.id).success(function(trackResponse){ 
       return trackResponse; //send trackers response directly 
      }) 
     } 

Я надеюсь, что этот подход поможет разобраться Ваш вопрос :-) Спасибо.