AngularJs Json问题答案

【问题标题】：AngularJs Json issueAngularJs Json问题
【发布时间】：2018-04-06 06:12:12
【问题描述】：

我目前正在使用 angularJS，但遇到了问题。

当我切换 AngularJS 的版本时，以下代码不起作用

    <script>
    // Code goes here
angular.module('list', []);

function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'json_price_1.json'
  }).success(function(data) {
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });
    });
  });
}
    </script>
    </head>
    <body ng-app="list">
<h3>List of Artists</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="artist in artists">
    <li>{{artist.name}}</li>
  </ul>
    </div>
<h3>List of Albums</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="album in albums">
    <li>{{album.title}}</li>
  </ul>
    </div>
</body>

当我使用旧版本的 AngularJS 时，上面的代码运行良好

旧版 AngularJS 链接：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>

但是当我调用 New AngularJS 时它不起作用

新的 AngularJS 链接：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

帮我解决这个问题。

Json 文件

{
  "version": "1",
  "artists": [
    {
      "name": "artist1name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum1",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "1"
        },
        {
          "type": "cd",
          "title": "titlealbum2",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "2"
        },
        {
          "type": "cd",
          "title": "titlealbum3",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "3"
        }
      ]
    },
    {
      "name": "artist2name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum4",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "4"
        },
        {
          "type": "cd",
          "title": "titlealbum5",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "5"
        },
        {
          "type": "cd",
          "title": "titlealbum6",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "6"
        }
      ]
    }
  ]
}

【问题讨论】：

你遇到了什么错误？
我在开发者工具 Google chrome (inspect) 中没有收到任何错误，但在 console.log(data) 中所有结果都可见。
这里是代码。
查看下面的代码plnkr.co/edit/ikDJxC2WegN3R2chESG3?p=preview

标签： javascript html angularjs json

【解决方案1】：

您需要将控制器添加到角度模块中

angular.module('list', [])
.controller('ListCtrl', function ($scope, $http) {
  $http({
    method: 'GET',
    url: 'json_price_1.json'
  }).success(function(data) {
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });
    });
  });
});

这是一个针对 angularjs 1.6.9 的工作示例（通过在范围上添加 json 来简化）

angular.module('list', [])
.controller('ListCtrl', function ($scope, $http) {
    
    $scope.json = {
  "version": "1",
  "artists": [
    {
      "name": "artist1name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum1",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "1"
        },
        {
          "type": "cd",
          "title": "titlealbum2",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "2"
        },
        {
          "type": "cd",
          "title": "titlealbum3",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "3"
        }
      ]
    },
    {
      "name": "artist2name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum4",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "4"
        },
        {
          "type": "cd",
          "title": "titlealbum5",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "5"
        },
        {
          "type": "cd",
          "title": "titlealbum6",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "6"
        }
      ]
    }
  ]
};
    
    var data = $scope.json;
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });
    });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <div ng-app="list">
<h3>List of Artists</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="artist in artists">
    <li>{{artist.name}}</li>
  </ul>
    </div>
<h3>List of Albums</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="album in albums">
    <li>{{album.title}}</li>
  </ul>
    </div>
</div>

【讨论】：

感谢您的回复，我需要从外部 json 文件调用，如果我从外部 json 文件调用它无法正常工作

【解决方案2】：

在您的 json 响应中，您在 data.data 中获取数据，因此您应该使用

$scope.artists = data.data.artists

这是代码，

var list = angular.module("list",[]);       

list.controller('ListCtrl', function($scope, $http) {

  $http({
    method: 'GET',
    url: 'todos.json'
  }).then(function(data) {

    $scope.artists = data.data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });

    });


  });
});

Here is a working plunker

【讨论】：

hai，你检查过plunker吗？
很高兴为您提供帮助，如果您觉得我的回答有用，您可以接受并投票。 :)