반응형
AngularJS로 중첩 JSON 액세스
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 은 올바르게 표시되고 있습니다.
두 번째 질문은 텍스트 필드로 아티스트들을 어떻게 필터링할 것인가 하는 것입니다.
저는 다음과 같은 것을 제안합니다.
$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>
당신의 모든 문제는 당신의 JSON에서부터 시작됩니다.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);
});
});
});
}다음은 제시 예제에 기반한 수정된 Plunkr입니다:
플렁커 확인 링크
"이 중첩된 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>
<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>
언급URL : https://stackoverflow.com/questions/19824959/accessing-nested-json-with-angularjs
반응형
'programing' 카테고리의 다른 글
| Angular JS에서 ngBind, ngBindHtm & ngBindTemplate의 차이 (0) | 2023.09.24 |
|---|---|
| jQuery $.cookie는 함수가 아닙니다. (0) | 2023.09.24 |
| 단일 파일만 병합 다시 실행 (0) | 2023.09.24 |
| MySQL 긴 문자열을 저장하는 가장 좋은 방법 (0) | 2023.09.24 |
| 상태가 변경될 때 명명된 보기에서 다시 로드를 방지하려면 어떻게 해야 합니까?각진JS UI-라우터 (0) | 2023.09.24 |