Accessing nested JSON objects and arrays within objects to display in HTML - AngularJS

Question

I'm having trouble trying to pull through specific values within nested JSON data, I have been searching endlessly and tried lots of different routes but to no avail. Basically I would like to take all the instances of 'summary' and display them as instructions (list items) like this:

Metropolitan line to Finchley Road
Jubilee line to Waterloo

I'm still a newbie to AngularJS so any help is much appreciated, I think I may be way over complicating it.

JSON

{
"$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.ItineraryResult, Tfl.Api.Presentation.Entities",
"journeys": [
    {
        "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.Journey, Tfl.Api.Presentation.Entities",
        "startDateTime": "2019-03-11T21:22:00",
        "duration": 49,
        "arrivalDateTime": "2019-03-11T22:11:00",
        "legs": [
            {
                "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.Leg, Tfl.Api.Presentation.Entities",
                "duration": 34,
                "instruction": {
                    "$type": "Tfl.Api.Presentation.Entities.Instruction, Tfl.Api.Presentation.Entities",
                    "summary": "Metropolitan line to Finchley Road",
                    "detailed": "Metropolitan line towards Aldgate",
                    "steps": []
                },
            },
            {
                "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.Leg, Tfl.Api.Presentation.Entities",
                "duration": 13,
                "instruction": {
                    "$type": "Tfl.Api.Presentation.Entities.Instruction, Tfl.Api.Presentation.Entities",
                    "summary": "Jubilee line to Waterloo",
                    "detailed": "Jubilee line towards Stratford",
                    "steps": []
                },
                ],
            }
        ]

HTML

<ul ng-repeat="x in data.journeys[0]">

    <li ng-repeat="y in x.legs[0]">{{y.instruction.summary}}</li>

</ul>

Answer 1

You need to use ng-repeat over data.journeys not data.journeys[0].

DEMO

 var app = angular.module("App", []); app.controller("Cont", function($scope) { $scope.data = { "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.ItineraryResult, Tfl.Api.Presentation.Entities", "journeys": [ { "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.Journey, Tfl.Api.Presentation.Entities", "startDateTime": "2019-03-11T21:22:00", "duration": 49, "arrivalDateTime": "2019-03-11T22:11:00", "legs": [ { "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.Leg, Tfl.Api.Presentation.Entities", "duration": 34, "instruction": { "$type": "Tfl.Api.Presentation.Entities.Instruction, Tfl.Api.Presentation.Entities", "summary": "Metropolitan line to Finchley Road", "detailed": "Metropolitan line towards Aldgate", "steps": [] } }, { "$type": "Tfl.Api.Presentation.Entities.JourneyPlanner.Leg, Tfl.Api.Presentation.Entities", "duration": 13, "instruction": { "$type": "Tfl.Api.Presentation.Entities.Instruction, Tfl.Api.Presentation.Entities", "summary": "Jubilee line to Waterloo", "detailed": "Jubilee line towards Stratford", "steps": [] } } ] } ] }; });

 <!DOCTYPE html> <html> <head> <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script> </head> <body ng-app="App" ng-controller="Cont"> <ul ng-repeat="x in data.journeys"> <li ng-repeat="y in x.legs">{{y.instruction.summary}}</li> </ul> </body> </html>

Accessing nested JSON objects and arrays within objects to display in HTML - AngularJS

Question

1 answers

solution1
0 ACCPTED 2019-03-12 02:39:05

Accessing nested JSON objects and arrays within objects to display in HTML - AngularJS

Question

1 answers

solution1 0 ACCPTED 2019-03-12 02:39:05

solution1
0 ACCPTED 2019-03-12 02:39:05