L'accès imbriquée JSON avec AngularJS

Je suis en train de faire et mobile webapp avec angular.js, hammer.js et la couche de finition.

Je vais avoir quelques problèmes sur l'affichage de données à partir d'un fichier Json comme celui-ci:

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

Mon fichier js est comme ceci:

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

Mon fichier HTML est comme ceci:

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

Je veux afficher tous les albums et si mon utilisateur de sélectionner un artiste en particulier, je veux filtrer ces albums.
La question ici est de savoir comment je sélectionne sur ce imbriquée json. BTW, l'artiste.le nom s'affiche correctement.

Deuxième question est, comment vais-je filtrer ces artistes avec un champ de texte.

où est le json généré? A incohérent des modèles dans des albums. Le premier album n'a pas de tableau en elle, deux autres. Aurait pour rediriger les données avant de les transmettre à angulaires de cette façon
J'ai généré le taper. Mais un script php va générer plus tard. Chaque fois que j'utilise JsonLint pour valider mon Json, donc ignorer cette erros s'il vous plaît. Merci!
bien structure json est loin d'être idéale. Ce n'est pas valide...c'est que devraient utiliser les tableaux d'objets...va rendre beaucoup plus facile la configuration angulaire

InformationsquelleAutor scarface13 | 2013-11-06

Je suggère quelque chose comme ceci:

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

Et puis:

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

InformationsquelleAutor Adam

Tous vos problèmes de démarrage avec votre JSON. Je vous recommande de simplifier votre JSON et faire de chaque Artist et Album un Objet et Artists et Albums les tableaux d'objets.

Essayez celui-ci:


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

Un Tableau peut être vide comme dans mon exemple (artist2 n'a pas d'album attribué).

Vous avez aussi mal asignment dans votre ListCtrl, vous ne pouvez pas affecter et d'afficher les albums jusqu'à ce que vous connaissez la bonne Artist. Si vous souhaitez afficher tous les albums de tous les artistes, vous avez besoin de parcourir tous les artistes.

Exemple de contrôleur:


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

Ici est modifié Plunkr basé sur jessie exemple: http://plnkr.co/edit/zkUqrPjlDYhVeNEZY1YR?p=preview

InformationsquelleAutor ivoszz

5

Vérifier Plunker lien

Réponse à votre question "comment vais-je sélectionner sur cette imbriquée json?"
```
$.each(data.artists, function(index, element){
  $.each(this.albums, function(index, element){
    $scope.albums.push(element);
  });
});
```
Réponse à votre question "comment vais-je filtrer ces artistes avec un champ de texte?"
```
<input ng-model="searchText.artistName">

<ul ng-repeat="album in albums | filter:searchText">
    <li>{{album.title}}</li>
</ul>
```
- Merci beaucoup! Votre exemple est très instructif. Je suis très novice sur ce, et votre réponse était génial!
InformationsquelleAutor 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>

InformationsquelleAutor Noredine Bahri

Vous devez vous connecter pour publier un commentaire.