使用 AngularJS 访问嵌套的 JSON
Posted
技术标签:
【中文标题】使用 AngularJS 访问嵌套的 JSON【英文标题】：Accessing nested JSON with AngularJS 【发布时间】：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 的良好结构远非理想。这不是关于有效......它应该使用对象数组......这将使设置角度变得更容易 【参考方案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>
【讨论】：
以上是关于使用 AngularJS 访问嵌套的 JSON的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS“多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程