How to access nested Json objects in AngularJs

Question

I work with an AngularJs/Laravel application. I try to access items in each facture. Actually I can't print out the whole facture object, but I wonder how to access the items so that I can loop trough them and display each.

Here is my Php Controller that send Json data

public function show($id)
{
    $facture = Facture::where('id', '=', $id)->with('items')->get();
    return Response::json($facture);
}

Here is my simplified AngularJs Controller

$http.get('api/factures/' + $stateParams.factureId).success(function(data) {
  $scope.facture = data;
});

And actually

{{facture |json}}

prints out this:

[
  {
    "id": 10200,
    "client_id": 1,
    "lead_id": 1,
    "courtedescription": "Description test",
    "etat": "En attente",
    "created_at": "2014-12-30 10:01:46",
    "updated_at": "2014-12-30 10:01:46",
    "items": [
      {
        "id": 1,
        "facture_id": 10200,
        "description": "Item numéro 1",
        "prix": "15.00",
        "tps": "0.75",
        "tvq": "1.50",
        "grandtotal": "17.25",
        "created_at": "2014-12-30 10:01:46",
        "updated_at": "2014-12-30 10:01:46"
      },
      {
        "id": 2,
        "facture_id": 10200,
        "description": "Deuxième item quoi",
        "prix": "135.00",
        "tps": "6.75",
        "tvq": "13.47",
        "grandtotal": "155.22",
        "created_at": "2014-12-30 10:01:46",
        "updated_at": "2014-12-30 10:01:46"
      }
    ]
  }
]

Here is a simplified Plunkr to focus on the essential: http://plnkr.co/edit/fZmb4fAX0GJCDH2cpxwQ?p=preview

How could I access the items?

Great, now I'm looking how to loop trough so that I show properties — Lucien Dubois
– Lucien Dubois, Commented Feb 20, 2015 at 14:53

Alex Jones · Accepted Answer · 2015-02-20 14:35:18Z

1

You can use the fucture value as a normal array because its within the views scope.

For instance if you want the id of the first object in the array you would use the following

{{facture[0].id |json}}

If you would like to loop over each value check out https://docs.angularjs.org/api/ng/directive/ngRepeat

Hope this helps!

answered Feb 20, 2015 at 14:35

Alex Jones

1561 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lucien Dubois Over a year ago

Seems great as I can now access items propreties with {{facture[0].items[0].id}}. How could I loop trough items now?

Alex Jones Over a year ago

Using NgRepeat: <body ng-controller="MainCtrl"> <div ng-repeat="facture in factures"> <h1>facture</h1> <pre ng-repeat="item in facture.items">{{item | json}}<pre> </div> </body>

Alex Jones Over a year ago

Make sure you change the facture array to factures. Details on how this works can be found here: docs.angularjs.org/api/ng/directive/ngRepeat

Collectives™ on Stack Overflow

How to access nested Json objects in AngularJs

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related