使用AngularJS訪問嵌套的JSON
[英]Accessing nested JSON with AngularJS
問題描述
我正在嘗試使用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正確顯示。
第二個問題是，我將如何使用文本字段過濾這些藝術家。
4 個解決方案
解決方案1
14 已采納 2013-11-07 00:01:33
我建議像這樣：
$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
7 2013-11-07 09:08:53
您的所有問題都以您的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": []
}
]
}
在我的示例中，數組可以為空（artist2沒有分配相冊）。
您在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
解決方案3
5 2013-11-07 05:53:25
回答你的問題“我如何選擇這個嵌套的json？”
$.each(data.artists, function(index, element){
$.each(this.albums, function(index, element){
$scope.albums.push(element);
});
});
回答你的問題“我將如何使用文本字段過濾那些藝術家？”
<input ng-model="searchText.artistName">
<ul ng-repeat="album in albums | filter:searchText">
<li>{{album.title}}</li>
</ul>
解決方案4
0 2016-09-11 19:24:20
<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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.