将一个字符串数组传递给$ http get服务，一次一个。 Angular.js

Question

  $scope.sampleData = function() {
    var output;
    $scope.sampleArtist.map(function(el){
      $http.get('https://api.spotify.com/v1/search?type=artist&q='+el).then(function(data) {
        console.log(data);
        output = data;
              console.log(data.data.artists.items[0].name);
              $scope.artist.name = data.data.artists.items[0].name;
              $scope.artist.popularity = data.data.artists.items[0].popularity;
            }).then(function(){
              $http.get('https://api.spotify.com/v1/artists/'+ output.data.artists.items[0].id +'/top-tracks?country=SE').then(function(response) {
        $scope.artist.tracks = response.data.tracks;
        $scope.artists.push($scope.artist);
        $scope.artist = {};
              })
            })
      })
    }

有一串字符串["Steven wilson", "Dream Theater", "Deep Purple", "Slipknot"] 我需要一次将每个字符串传递给$ http服务，以便相关数据显示在屏幕上。

但是，它仅显示三个字符串的数据，并仅显示三个字符串中的一个的名称和流行度。它显示所有三个曲目。

请记住，我有另一个功能，用户手动传递一个字符串，它正确地显示数据，我已经尝试手动传递数组中的每个数据，并且它显示正确，所以如何没有错访问数据。

另外，我收到此错误

angular.js:14328 TypeError: Cannot read property 'name' of undefined
    at http://127.0.0.1:3000/assets/js/app.js:33:53
    at http://127.0.0.1:3000/bower_components/angular/angular.min.js:133:460
    at m.$eval (http://127.0.0.1:3000/bower_components/angular/angular.min.js:147:313)
    at m.$digest (http://127.0.0.1:3000/bower_components/angular/angular.min.js:144:421)
    at m.$apply (http://127.0.0.1:3000/bower_components/angular/angular.min.js:148:78)
    at l (http://127.0.0.1:3000/bower_components/angular/angular.min.js:101:89)
    at XMLHttpRequest.t.onload (http://127.0.0.1:3000/bower_components/angular/angular.min.js:106:489) Possibly unhandled rejection: {}