使用 AngularJS 访问嵌套的 JSON答案

【问题标题】：Accessing nested JSON with AngularJS使用 AngularJS 访问嵌套的 JSON
【发布时间】：2013-11-18 10:48:19
【问题描述】：

我正在尝试使用 angular.js、hammer.js 和 topcoat 制作移动 webapp。

我在显示像这样的 Json 文件中的数据时遇到了一些问题：

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

我的js文件是这样的：

angular.module('list', [])
function ListCtrl ($scope, $http) {
$http({method: 'GET', url: 'json/json_price_1.json'}).success(function(data)
{
$scope.artists = data.artists; // response data 
$scope.albums = data.artists.albums; /this is where im getting trouble
});        
};

我的 HTML 文件是这样的：

<body ng-app="list">

<h3>Titulos</h3>

<div ng-controller="ListCtrl">
<ul ng-repeat="artist in artists">
        <li >{{artist.name}}</li>

    </ul>
</div>

<div ng-controller="ListCtrl">
<ul ng-repeat="album in albums">
        <li >{{album.title}}</li>  //not working here. 

    </ul>
</div>

我想显示所有专辑，如果我的用户选择了特定的艺术家，我想过滤这些专辑。这里的问题是我将如何在这个嵌套的 json 上进行选择。顺便说一句，artist.name 显示正确。

第二个问题是，我将如何使用文本字段过滤这些艺术家。

【问题讨论】：

生成的json在哪里？专辑中的模式不一致。第一张专辑里面没有数组，其他两张有。在以这种方式传递给角度之前必须重新映射数据
我生成了打字。但是稍后会生成一个 php 脚本。每次我使用 JsonLint 来验证我的 Json，所以请忽略这个错误。谢谢！
json 的良好结构远非理想。这不是关于有效......它应该使用对象数组......这将使设置角度变得更容易

标签： javascript json angularjs mobile cordova

【解决方案1】：

我建议是这样的：

$http({method: 'GET', url: 'json/json_price_1.json'}).success(function(data) {
    $scope.artists = [];
    angular.forEach(data.artists, function(value, key) {
        $scope.artists.push(value);
    });
    $scope.isVisible = function(name){
        return true;// return false to hide this artist's albums
    };
});

然后：

<div ng-controller="ListCtrl">
    <ul>
        <li ng-repeat="artist in artists">{{artist.name}}</li>
    </ul>
    <ul ng-repeat="artist in artists" ng-show="isVisible(artist.name)">
        <li ng-repeat="album in artist.albums">{{album.title}}</li>
    </ul>
</div>

【讨论】：

【解决方案2】：

查看Plunker link

回答您的问题“我将如何在这个嵌套的 json 上进行选择？”

$.each(data.artists, function(index, element){
  $.each(this.albums, function(index, element){
    $scope.albums.push(element);
  });
});

回答您的问题“我将如何使用文本字段过滤这些艺术家？”p>

<input ng-model="searchText.artistName">

<ul ng-repeat="album in albums | filter:searchText">
    <li>{{album.title}}</li>
</ul>

【讨论】：

非常感谢！你的例子很有启发性。我是这方面的新手，你的回答很棒！

【解决方案3】：

你所有的问题都从你的 JSON 开始。我建议您简化 JSON 并将每个 Artist 和 Album 对象和 Artists 和 Albums 对象数组。

试试这个：


{
  "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"
        },
        {
          "type": "cd",
          "title": "titlealbum2",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2"
        },
        {
          "type": "cd",
          "title": "titlealbum3",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3"
        }
      ]
    },
    {
      "name": "artist2name",
      "jpeg": "../img/artist/artist2.jpg",
      "albums": []
    }
  ]
}

一个数组可以是空的，就像我的例子一样（艺术家 2 没有分配专辑）。

您的ListCtrl 也有错误分配，在您知道正确的Artist 之前，您无法分配和显示相册。如果要显示所有艺术家的所有专辑，则需要遍历所有艺术家。

示例控制器：


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

这里是基于 jessie 示例修改的 Plunkr：http://plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR?p=preview

【讨论】：

【解决方案4】：

<ul ng-repeat="artist in artists">
    <li>
        <p>{{artist.name}}</p> 

        <ul ng-repeat="(key,val) in artist.albums">

            <li>{{key}} - {{val}}</li>

        </ul> 
    </li>
</ul>

【讨论】：