角度ng-repeat显示对象项目

Question

I am having a problem with displaying a JSON array objects that I have gotten from a async http request.

I have used ng-repeat to try and display the objects in the view but I am having no luck after many hours. Here is the code I have so far.

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

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);
    });
}]);

{
    "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 fiddle https://jsfiddle.net/owxwh0kz/

Answer 1

You are iterating over parks already, so your code can look like this

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

(I changed item.park.name to be item.park_name to match your data)

Otherwise check using the Angular inspector to see what the data looks like.

Answer 2

It looks like the data coming back from the json object is not consitent with your binding selectors. Inside an ng-repeat you are alreading interating over the scope of 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>

For the images because they are in another array you would have to performn another repeat to grab all images.Note that nested ng-repeats can lead to negative performance impacts.

Answer 3

Based on your code, you should iterate over parks.parks to reach the array of the $scope.parks object.

Also, within the ng-repeat you should use item.* instead of item.parks.*

Here is JSFiddle with the fixed code: https://jsfiddle.net/x0ja420L/

Answer 4

Some code changes has been made in your code :

• Proper closing of the HTML tags to work it properly.

Use <h2>{{item.park_name}}</h2> instead of <h2>{{item.park_name}}<h2>

• ng-repeat directive iterate the array object so if you want to access park_name you have to use ng-repeat like this ng-repeat="item in parks.parks"

demo !

Answer 5

ng-repeat directive iterate the array object, so if you want to access park_name you have to use ng-repeat like this ng-repeat="item in parks.parks" ,code should like this

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

you can see the demo