2016-08-21 6 views
0

私はいくつかのanglejsものを試しています。だから私はいくつかの配列を持っています。その一つがアーティストです。これは、問題は私が個別に配列の要素にアクセスすることができないということですconsole.log(artists);Javascript配列要素は未定義です

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 
+0

だから、あなたを混乱させますか?配列が空のままである場合が多いケースがあります。 httpリクエストが失敗するか、アイテムが返されません。 –

+0

コンソールからアレイを示す画像が添付されています。明らかに空ではありません。 –

+0

イメージを見ました。しかし、 'console.log(artist)'の直後に 'console.log(artists.length)'を呼んだのかどうかは不明です。 –

答えて

0

問題は、あなたが発行する前artistsの内容を確認するということですhttp get要求が応答をトリガーしました。

それはこのように、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:あなたはそれのために提供する1つの要求、より多くを持っているとして、あなたは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またはそのメソッドの変形を調べることができます。援助が必要な場合は、新しい質問をすることをお勧めします。

関連する問題