자바 스크립트 배열 요소가 정의되지 않았습니다.

Question

일부 angularjs 항목을 시험 중입니다. 그래서 배열이 몇 개 있습니다. 그 중 하나가 아티스트입니다. 이것은 artists

문제는 내가 개별적으로 배열의 요소에 액세스 할 수 있다는 것입니다 console.log(artists);

에서 기본 구조입니다이다. 나는 연관 배열에 관한 많은 것을 읽었고 그래서에 관한 질문을 할 수도 있지만 아무도 정말로 도움이되지는 않습니다. 그래서 내가하는 바보 같은 실수이거나 다른 것입니다.

내가 가지고있는 모든 배열에 대해 얻은 결과는 거의 없습니다.

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 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 : 후속에

$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); 
      } 
     }); 
    }); 
}); 

: 당신은 두 개 이상의 요청이 그것을 위해 제공 가지고, 당신은 그것이 전체 같은 길이를 가지고있는 경우에만 tracks 배열의 길이를 확인해야 할 것 qu estion (의견에) 당신은 당신의 컨트롤러에서 이것을 설명했다. $watch 또는이 메소드의 변형을 들여다 볼 수 있습니다. 도움이 필요하면 새로운 질문을하는 것이 좋습니다.