it-swarm.com.de

Zugriff auf verschachtelte JSON mit AngularJS

Ich versuche, eine mobile Webapp mit Winkel.js, Hammer.js und Topcoat zu erstellen.

Ich habe Probleme beim Anzeigen von Daten aus einer Json-Datei wie dieser:

{
"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",

Meine js-Datei sieht so aus:

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

Meine HTML-Datei sieht so aus:

<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>

Ich möchte alle Alben anzeigen und wenn mein Benutzer einen bestimmten Interpreten auswählt, möchte ich diese Alben filtern ... Die Frage ist, wie ich diesen verschachtelten Json auswählen kann. Übrigens wird der artist.name korrekt angezeigt.

Die zweite Frage ist, wie ich diese Künstler mit einem Textfeld filtern kann. 

21
scarface13

Ich schlage so etwas vor:

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

Und dann:

<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>
13
Adam

Alle Ihre Probleme beginnen mit Ihrem JSON. Ich empfehle Ihnen, Ihren JSON zu vereinfachen und jede Artist und Album zu einem Object- und Artists- und Albums-Array von Objekten zu machen. 

Probier diese:


{
  "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": []
    }
  ]
}

Ein Array kann wie in meinem Beispiel leer sein (Artist2 hat kein Album zugewiesen).

Sie haben auch eine falsche Zuordnung in Ihrer ListCtrl. Sie können keine Alben zuweisen und anzeigen, bis Sie die richtige Artist kennen. Wenn Sie alle Alben aller Interpreten anzeigen möchten, müssen Sie alle Interpreten durchlaufen.

Beispiel Controller:


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

Hier ist Plunkr basierend auf Jessie Beispiel modifiziert: http://plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR?p=preview

6
ivoszz

Check Plunker link

Antwort auf Ihre Frage "Wie kann ich diesen verschachtelten Json auswählen?" 

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

Antwort auf Ihre Frage "Wie filtere ich diese Künstler mit einem Textfeld?"

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

<ul ng-repeat="album in albums | filter:searchText">
    <li>{{album.title}}</li>
</ul>
4
jessie
<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>
0
Noredine Bahri