Question

我在显示从异步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/

Answer 1

您正在迭代公园，因此您的代码可能如下所示

$("#the_form_id").on("submit", function(e){ 
    $("input").filter(":hidden").remove()
})

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

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

Answer 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可能会对性能产生负面影响。

Answer 3

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

此外，在ng-repeat内你应该使用item.*代替item.parks.*

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

Answer 4

private void addSpannableString(){ //"1" "HOT, MORE CHILLI" and "Pizza" String one= "1"; String two= "HOT, MORE CHILLI"; String three= "Pizza"; String mergeString= one + two + three; Spannable spannable = new SpannableString( mergeString ); StyleSpan boldSpan = new StyleSpan( Typeface.BOLD ); spannable.setSpan( boldSpan, mergeString.indexOf(two), mergeString.indexOf(three), Spannable.SPAN_INCLUSIVE_INCLUSIVE ); textview.setText(mergeString); }指令迭代数组对象，所以如果你想访问park_name，你必须像ng-repeat一样使用ng-repeat，代码应该是这样的

ng-repeat="item in parks.parks"

您可以看到demo

角度ng-repeat显示对象项目

4 个答案: