угловые ng-repeat отображения объектов объекта

Question

У меня возникла проблема с отображением объектов массива JSON, которые я получил от асинхронного HTTP-запроса.

Я использовал 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/

Answer 1

Вы итерация парков уже, так что ваш код может выглядеть следующим образом

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

(я изменил item.park.name быть item.park_name, чтобы соответствовать Вашему данные)

В противном случае проверьте с помощью Углового инспектора, чтобы посмотреть, как выглядят данные.

Answer 2

Похоже, что данные, возвращаемые с объекта json, не связаны с вашими переключателями привязки. Внутри ng-repeat вы распространяете interating в пределах 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> 

Для изображений, потому что они находятся в другом массиве вы должны performn еще повторить, чтобы захватить все images.Note, что вложенное ng-repeats может привести к негативным последствиям деятельности.

Answer 3

На основе вашего кода вы должны перебрать более parks.parks, чтобы добраться до массива объекта $scope.parks.

Кроме того, в ng-repeat вы должны использовать item.* вместо item.parks.*

Здесь находится JSFiddle с фиксированным кодом: https://jsfiddle.net/x0ja420L/

Answer 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 !

Answer 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