Question

新角度。我试图调用多个$ http get调用，第二个调用取决于结果并解析第一个JSON，如下所示：

1）做一个$ http get请求来获取一个JSON，其中包含一系列元素，如[＆＃34;专辑1＆＃34;，＆＃34;专辑2＆＃34;]

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 异步，$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
            })
        }

我希望这种方法有助于解决您的问题:-) 感谢。

AngularJS链接$ http获取请求

2 个答案: