访问对象内的嵌套 JSON 对象和数组以在 HTML 中显示 - AngularJS答案

【问题标题】：Accessing nested JSON objects and arrays within objects to display in HTML - AngularJS访问对象内的嵌套 JSON 对象和数组以在 HTML 中显示 - AngularJS
【发布时间】：2019-08-02 10:25:49
【问题描述】：

我在尝试提取嵌套 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>

【问题讨论】：

您的页面中的li 数量是否正确？因为你的外部重复在journeys[0]，这对我来说似乎不正确。它应该只是 data.journeys。与 x.legs 相同。它应该只是 x.legs 而不是 x.legs[0]
感谢@PM，我取出了 [0]，它显示了数据，但也显示了 JSON 下方的“旅程”。我只需要顶级实例，将代码更改为x in data.journeys | limitTo : 1 似乎可行，但这是最好的方法吗？
Marc，我认为这是正确的方法，如果你总是想从旅程中获得旅程的顶级实例。另一种方法可能是 <li ng-repeat="y in data.journeys[0].legs"> 但对我来说，您当前的方法看起来更好。

标签： html arrays angularjs json object

【解决方案1】：

您需要在 data.journeys 而不是 data.journeys[0] 上使用 ng-repeat。

演示

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>

【讨论】：

感谢 Sajeetharan，它显示了一些数据，但超出了我的预期。实际上在 JSON 中还有更多的“旅程”实例，所以它也显示了这些，我只想显示最上面的一个。如果我这样做 x in data.journeys | limitTo : 1 似乎可行，但这是最好的方法吗？