Loop through an array of objects with ng-repeat angular

Question

I can't find a way to loop through my array of json objects with angular .

My array looks like that in firebug(Each series of objects have an index value.):

 [[0], Object { idliste=0, id=1, photo="pot.jpg", plus...}, Object { idliste=0, id=3, photo="pot.jpg", plus...}]

 [[1], Object { idliste=1, id=1, photo="pot.jpg", plus...}, Object { idliste=1, id=3, photo="pot.jpg", plus...}]

 [[2], Object { idliste=2, id=1, photo="pot.jpg", plus...}, Object { idliste=2, id=3, photo="pot.jpg", plus...}]

It has been produced by this code :

        var idListe = $scope.getIdListe();
        $scope.listeCommandes[idListe]= new Array([idListe]);

        for (i=0;i<$scope.panier.length;i++){

                        $scope.listeCommandes[idListe].push({
                            idliste:idListe,
                            id:     $scope.panier[i].id,
                            photo:  $scope.panier[i].photo,
                            nom:    $scope.panier[i].nom,
                            quantite:$scope.panier[i].quantite, 
                            prix:   $scope.panier[i].prix,
                            heureajout:$scope.getHeure()
                        });

                    };

$scope.getIdListe = function(){
        var idListe = $scope.listeCommandes.length;
        return idListe;
    };

And the html is :

<div ng-repeat="idliste in listeCommandes" >
        <div ng-repeat="(nom, id) in idliste">
             {{nom}} : {{id}}
        </div>
</div>

It doesn't work. I really can't figure how to make it work, it means, simply print each objects, following the index number.

THank you if u got any idea. I've searched the forums but can't find any solution. Maybe it's the way i 've created an index that is wrong ?

could you please create a plukr/fiddle, its really hard to understand by looking at code — Pankaj Parkar
– Pankaj Parkar, Commented Apr 5, 2015 at 10:32

user4043491 · Accepted Answer · 2015-04-05 12:05:06Z

finally answered my problem by adding an angular module called angular-filter "mentionned within this example:

http://jsbin.com/weyov/45/edit?html,js,output

Thank a lot for you help .

Now my code look like that :

var idListe = $scope.getIdListe();

    for (i=0;i<$scope.panier.length;i++){

                    $scope.listeCommandes.push({
                        idliste:idListe,
                        id:     $scope.panier[i].id,
                        photo:  $scope.panier[i].photo,
                        nom:    $scope.panier[i].nom,
                        quantite:$scope.panier[i].quantite, 
                        prix:   $scope.panier[i].prix,
                        heureajout:$scope.getHeure()
                    });

                };

and the html :

    <ul ng-repeat="(key, value) in listeCommandes | groupBy: 'idliste'">
  Group name: {{ key }}
  <li ng-repeat="article in value">
    article: {{ article.nom}} 
  </li>
</ul>

then my orders are now all automtically grouped by ID in the html view :

    Group name: 0
article: Pots Gris
article: Pot Vert

Group name: 2
article: Pot Bleu
article: Pot Vert
article: Pinceaux

Group name: 5
article: Pots Gris
article: Pot Vert
article: Pot Rouge
article: Pot Bleu

Collectives™ on Stack Overflow

Loop through an array of objects with ng-repeat angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related