Элемент массива Javascript undefined

Question

Я пробовал некоторые вещи angularjs. Поэтому у меня есть несколько массивов. Один из них - художники. это его основная структура из console.log(artists);

artists

проблема заключается в том, что я не могу получить доступ к элементам массива индивидуально. Я много читал о ассоциативных массивах и мог задавать вопросы по SO, но никому это не помогло. Так что это либо очень глупая ошибка, которую я делаю, либо это нечто другое.

Вот несколько результатов, которые я получил с каждым массивом, который у меня есть.

console.log(artists[0]); //returns undefined 
console.log(artists['0']); //returns undefined 
console.log(artists.length); // returns 0 in spite of the fact it showed 20 previously 
console.log(Array.isArray(artists)); //returns true 

И да, я создал массив, как это в сервис, ChartService

var artists = []; 
var artistids = []; 
var tracks = []; 

$http.get('https://api.spotify.com/v1/search/?q=genre:pop&type=artist').success(function (data) { 
     var items = data.artists.items; 
     items.forEach(function(item){ 
      artists.push(item.name); 
      artistids.push(item.id); 
      var query = trackApi+item.id+'/top-tracks?country=SE' 

      $http.get(query).success(function (response) { 
       tracks.push({'preview': response.tracks[0].preview_url}); 

      }); 
     }); 


}); 

return { 
    Artists : artists, 
    Tracks : tracks 
    } 

И мой контроллер

console.log(ChartService.Artists); //runs fine 
console.log(ChartService.Tracks); //runs fine 

$scope.tracks = ChartService.Tracks; 

console.log($scope.tracks); //runs fine 
console.log($scope.tracks[0]); //returns undefined 
console.log($scope.tracks['0']); //returns undefined 
console.log($scope.tracks.length); // returns 0 in spite of the fact it showed 20 previously 
console.log(Array.isArray($scope.tracks)); //returns true 

Answer 1

Вопрос заключается в том, что вы проверить содержание artists до выдано HTTP-запросы получили ответные действия.

Один из способов решить, что это поместить ваш код в success обратного вызова, например:

$http.get('https://api.spotify.com/v1/search/?q=genre:pop&type=artist').success(function (data) { 
    var items = data.artists.items; 
    items.forEach(function(item){ 
     artists.push(item.name); 
     artistids.push(item.id); 
     var query = trackApi+item.id+'/top-tracks?country=SE' 

     $http.get(query).success(function (response) { 
      tracks.push({'preview': response.tracks[0].preview_url}); 
     }); 
    }); 
    // here 
    console.log(artists); 
}); 

Тем не менее, это решает его для artists, но тогда вам нужно сделать что-то подобное, если вам нужно tracks: у вас есть более чем один запрос, предусматривающий, что вам нужно, чтобы проверить длину tracks массива и только тогда, когда он имеет полную длину, как это:

$http.get('https://api.spotify.com/v1/search/?q=genre:pop&type=artist').success(function (data) { 
    var items = data.artists.items; 
    items.forEach(function(item){ 
     artists.push(item.name); 
     artistids.push(item.id); 
     var query = trackApi+item.id+'/top-tracks?country=SE' 

     $http.get(query).success(function (response) { 
      tracks.push({'preview': response.tracks[0].preview_url}); 
      if (tracks.length == items.length) { // all done 
       console.log(artists, tracks); 
      } 
     }); 
    }); 
}); 

в последующей деятельности Цюй estion (в комментариях) вы объяснили, что это нужно в вашем контроллере. Вы можете посмотреть в $watch или варианты этого метода. Если вам нужна помощь, я бы предложил задать новый вопрос.