Angular JS：将对象数组写入$ scope变量

Question

I'm doing an application which takes API from iTunes and displays it in my HTML. 我正在做一个从iTunes获取API并将其显示在HTML中的应用程序。 But in $scope.bands variable always writes only one note. 但是在$ scope.bands变量中总是只写一个音符。

my code 我的密码

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="band in bands">
            {{band.artist}}
        </li>
    </ul>
</div>

<script>
    let app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
    $http.get(" https://itunes.apple.com/search?term=The+Beatles").then(function(response) {
  let jsonData = []; 
  for (let i = 0; i < response.data.resultCount; i++) {
    $scope.bands = [{
        artist:response.data.results[i].artistName,
        track:response.data.results[i].trackName,
        collection:response.data.results[i].collectionName,
        genre:response.data.results[i].primaryGenreName,
        image:response.data.results[i].artworkUrl100
    }];


  }
  }, function(response) {
  $scope.content = "ERROR:Something went wrong";});});


</script>

Please explain me, why it doesn't work properly! 请解释一下，为什么它不能正常工作！

Thank you in advance 先感谢您

Answer 1

You hadn't defined the value $scope.bands yet 您尚未定义$ scope.bands值

Checkout the scope article for more info: 请查看范围文章以获取更多信息：

https://docs.angularjs.org/guide/scope https://docs.angularjs.org/guide/scope

Also you need to push to an array: 您还需要推送到数组：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Try this: 尝试这个：

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="band in bands">
            {{band.artist}}
        </li>
    </ul>
</div>

<script>
    let app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
    $http.get(" https://itunes.apple.com/search?term=The+Beatles").then(function(response) {
  let jsonData = []; 
  $scope.bands = [];
  for (let i = 0; i < response.data.resultCount; i++) {
    $scope.bands.push({
        artist:response.data.results[i].artistName,
        track:response.data.results[i].trackName,
        collection:response.data.results[i].collectionName,
        genre:response.data.results[i].primaryGenreName,
        image:response.data.results[i].artworkUrl100
    });


  }
  }, function(response) {
  $scope.content = "ERROR:Something went wrong";});});


</script>

Also you could refactor slightly: 你也可以稍微重构一下：

  for (let i = 0; i < response.data.resultCount; i++) {
    let currentData = response.data.results
    $scope.bands.push({
        artist:currentData[i].artistName,
        track:currentData[i].trackName,
        collection:currentData[i].collectionName,
        genre:currentData[i].primaryGenreName,
        image:currentData[i].artworkUrl100
    });

Angular JS：将对象数组写入$ scope变量

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-13 21:02:17

Angular JS：将对象数组写入$ scope变量

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-13 21:02:17

解决方案1
0 已采纳 2018-03-13 21:02:17