Musicbrainz使用ng-repeat在Angular中獲取藝術家名稱| JSON

Question

我在這裏有點新，我必須回到Angular上進行一個小型應用項目。

我必須得到一個藝術家的列表，用MusicBrainz（音樂藝術家的元數據）提供的JSON對象編寫。

我做了例如使用下面的鏈接

http://search.musicbrainz.org/ws/2/artist/?query=muse%20e*&fmt=json 

的要求與以「MUSE」標籤的研究的結果返回一個JSON對象。但我想在我的html中打印這些「藝術家」的名字。

我正在使用AngularJS。

我做了這個代碼有點堵在我的app.js：

.controller('artisteCtrl', function($http, $scope){ 
    $scope.listenoms = []; 

    $http.get('http://search.musicbrainz.org/ws/2/artist/?query=muse%20e*&fmt=json') 
     .success(function(data){ 
      $scope.listenoms = data; 
      console.log($scope.listenoms); 
    }) 
}) 

然後我的HTML NG重複樣子：

<ul> 
    <li ng-repeat="name in listenoms"> 
     {{data['artist-list'].artist[0].area}} 
    </li> 
</ul> 

沒有什麼工作。它得到的對象，並在控制檯中顯示它，但我不能訪問孩子...

感謝您的幫助傢伙！

Answer 1

的$ HTTP響應不是一個數據對象，而是響應對象（見documentation），以下屬性組成：

data – {string|Object} – The response body transformed with the transform functions. 
status – {number} – HTTP status code of the response. 
headers – {function([headerName])} – Header getter function. 
config – {Object} – The configuration object that was used to generate the request. 
statusText – {string} – HTTP status text of the response. 

只需將response.data對象分配給您的scope屬性：

$scope.listenoms = data.data; 

，或者遵循一個更好的慣例，重命名數據爲「響應」，並使用.then()，而不是因爲.success().success()現在被認爲是過時：

$http.get('http://search.musicbrainz.org/ws/2/artist/?query=muse%20e*&fmt=json') 
    .then(function(response){ 
     $scope.listenoms = response.data; 
     console.log($scope.listenoms); 
    } 
) 

最後，您正在模板中使用來自負載的不正確對象結構。它應該看起來像下面這樣：

<ul> 
    <li ng-repeat="artist in listenoms['artist-list'].artist"> 
     {{artist.area}} 
    </li> 
</ul>