【问题标题】：angular ng-repeat displaying object items角度 ng-repeat 显示对象项目
【发布时间】：2016-12-04 22:49:35
【问题描述】：

我在显示从异步 http 请求中获得的 JSON 数组对象时遇到问题。

我已经使用 ng-repeat 尝试在视图中显示对象，但几个小时后我没有运气。这是我到目前为止的代码。

index.html

<div class="main" ng-controller = "MyController">
<ul>
<li ng-repeat="item in parks">
  <div class="info">
    <h2>{{item.parks.name}}<h2>
    <h2>{{item.parks.park_size}}<h2>
    <h2>{{item.parks.open_times}}<h2>
    <h2>{{item.parks.days_closed}}<h2>
    <img ng-src="images/{{item.parks.short}}.jpg">
  </div>
</li>

controllers.js

var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
        $http.get('js/data.json').success(function(data) {
      $scope.parks = data;
      console.log(data);
    });
}]);

data.json

{
    "parks": [
        {
      "park_name": "Central Park",
      "park_size": {
                "miles": "1.2",
                "meters": "1900"
            },
      "open_times": {
                "Monday-Friday": "8am-10pm",
                "Saturday-Sunday": "10am-6.30pm"
            },
            "days_closed": [
                "December 25th",
                "December 26th"
            ],

      "images": [
                {
                    "short": "centralimage1.jpeg"
                },
                {
                    "short": "centralimage2.jpeg"
                },
                {
                    "short": "centralimage3.jpeg"
                },
                {
                    "short": "centralimage4.jpeg"
                }
            ]
        },
    {
      "park_name": "Riverside Park",
      "park_size": {
                "miles": "0.2",
                "meters": "320"
            },
      "open_times": {
                "Monday-Friday": "7am-9pm",
                "Saturday-Sunday": "9am-8.30pm"
            },
            "days_closed": [
                "December 25th",
                "December 26th",
        "Jamuary 1st"
            ],

      "images": [
                {
                    "short": "riversideimage1.jpeg"
                },
                {
                    "short": "riversideimage2.jpeg"
                },
                {
                    "short": "riversideimage3.jpeg"
                },
                {
                    "short": "riversideimage4.jpeg"
                }
            ]
        }





    ]
}

JS 小提琴 https://jsfiddle.net/owxwh0kz/

【问题讨论】：

请用您的代码创建 JSFiddle。
@TomePejoski jsfiddle.net/owxwh0kz
@D Weir，请在我的回答 stackoverflow.com/a/40965242/2106876 中找到工作版本。干杯！

标签： javascript angularjs json angularjs-ng-repeat ng-repeat

【解决方案1】：

您已经在对 parks 进行迭代，因此您的代码可能如下所示

<li ng-repeat="item in parks">
  <div class="info">
    <h2>{{item.park_name}}<h2>

（我将 item.park.name 更改为 item.park_name 以匹配您的数据）

否则使用 Angular 检查器检查数据的样子。

【讨论】：

【解决方案2】：

看起来从 json 对象返回的数据与您的绑定选择器不一致。在ng-repeat 中，您已经在parks 的范围内进行交互。

<li ng-repeat="item in parks">
  <div class="info">
    <h2>{{item.park_name}}<h2>
    <h2>{{item.park_size}}<h2> 
    <h2>{{item.open_times}}<h2>
    <h2>{{item.days_closed}}<h2>

对于图像，因为它们位于另一个数组中，您必须再次重复才能获取所有图像。请注意，嵌套的 ng-repeats 可能会导致负面的性能影响。

【讨论】：

【解决方案3】：

根据您的代码，您应该遍历 parks.parks 以到达 $scope.parks 对象的数组。

另外，在ng-repeat 中，您应该使用item.* 而不是item.parks.*

这里是带有固定代码的 JSFiddle：https://jsfiddle.net/x0ja420L/

【讨论】：

【解决方案4】：

在您的代码中进行了一些代码更改：

正确关闭 HTML 标记以使其正常工作。

使用<h2>{{item.park_name}}</h2> 而不是<h2>{{item.park_name}}<h2>

ng-repeat 指令迭代数组对象，所以如果你想访问 park_name 你必须像这样使用 ng-repeat ng-repeat="item in parks.parks"

demo !

【讨论】：

【解决方案5】：

ng-repeat 指令迭代数组对象，所以如果你想访问 park_name 你必须使用ng-repeat 这样ng-repeat="item in parks.parks"，代码应该是这样的

  <li ng-repeat="item in parks.parks">
  <div class="info">
    <h2>{{item.park_name}}<h2>
    <h2>{{item.park_size}}<h2>
    <h2>{{item.open_times}}<h2>
    <h2>{{item.days_closed}}<h2>
    <img ng-src="images/{{item.images[0].short}}.jpg">
  </div>
</li>

你可以看到demo

【讨论】：