Доступ к вложенным объектам и массивам JSON внутри объектов для отображения в HTML - AngularJS - PullRequest
Новая
       2

Доступ к вложенным объектам и массивам JSON внутри объектов для отображения в HTML - AngularJS

1 голос
/ 12 марта 2019

У меня проблемы с попыткой просмотреть определенные значения во вложенных данных JSON, я искал бесконечно и пробовал множество разных маршрутов, но безрезультатно.В основном я хотел бы взять все экземпляры «итогов» и отобразить их в виде инструкций (элементов списка), например:

  • Столичная линия до Финчли-роуд
  • Юбилейная линия до Ватерлоо

Я все еще новичок в AngularJS, поэтому любая помощь очень ценится, я думаю, что я могу быть слишком усложнен.

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>

1 Ответ

0 голосов
/ 12 марта 2019

Вам необходимо использовать ng-repeat для data.journeys, а не 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...