Question

这是我的JSON文件：

   {
"countries":[
    {
        "country": "India",
        "cities" : [{
            "name": "Bangalore",
            "rank": "40"
        },
        {   "name": "Mumbai",
            "rank": "32"
        },
        {   "name": "Kolkata",
            "rank": "54"
        },
        {   "name": "Chennai",
            "rank": "42"
        }]
    },      
    {   "country": "China",
        "cities":[{"name": "Guangzhou",
            "rank": "111"
        },
        {   "name": "Fuzhou",
            "rank": "21"
        },
        {   "name": "Beijing",
            "rank": "90"
        },
        {   "name": "Baotou",
            "rank": "23"
        }]
    }
]}

这是 angularjs 代码：

    $scope.countryType = [
        { type: 'India', data:$scope.India, displayName:'India' },
         { type: 'China', data:$scope.China, displayName:'China'},
         { type: 'Ethiopia', data:$scope.Ethiopia, displayName:'Ethiopia'},
         { type: 'Cuba', data:$scope.Cuba, displayName:'Cuba'}
];

这个 angularjs 代码对我来说很好，但我不知道如何从访问名称和排名 countryType 的数据，我也想根据国家/地区对其进行过滤。

对于 HTML 页面我正在使用此代码：

<select ng-model="country.city" ng-options="country as country.type for country in countryType | orderBy: 'type'">
        <option value=""> - Select a Country - </option>    
</select>

<ul ng-repeat = "city in countryType | filter : country.city.data.cities.country  ">
    <li ng-repeat="details in city.data.cities">
        <span> {{details.name}} </span>
        <span> {{details.rank}}</span>
    </li>
</ul>

我必须在html中使用不同的代码来访问数据吗？所有数据都将到来，但我无法对其进行过滤。

Answer 1

所以，基本上你的数据结构中有两级数组。这就是为什么你需要在乡村循环中循环来访问城市。

您的数据结构发生了一些变化，以及一个示例供您参考：

<强> HTML：

<div class="container">
    <div ng-controller="FormController as formCtrl">
        <table>
            <tbody ng-repeat="country in formCtrl.contryType">
                <tr>
                    <th colspan="2">{{country.country}}</th>
                </tr>
                <tr ng-repeat="city in country.cities">
                    <td>{{city.name}}</td>
                    <td>{{city.rank}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<强> JavaScript的：

var app = angular.module("myApp", []);

app.controller("FormController", function () {
    var ctrl = this;

    ctrl.contryType = [{
            "country" : "India",
            "cities" : [{
                    "name" : "Bangalore",
                    "rank" : "40"
                }, {
                    "name" : "Mumbai",
                    "rank" : "32"
                }, {
                    "name" : "Kolkata",
                    "rank" : "54"
                }, {
                    "name" : "Chennai",
                    "rank" : "42"
                }
            ]
        }, {
            "country" : "China",
            "cities" : [{
                    "name" : "Guangzhou",
                    "rank" : "111"
                }, {
                    "name" : "Fuzhou",
                    "rank" : "21"
                }, {
                    "name" : "Beijing",
                    "rank" : "90"
                }, {
                    "name" : "Baotou",
                    "rank" : "23"
                }
            ]
        }
    ];
});

angular.bootstrap(document, ['myApp']);

工作小提琴： http://jsfiddle.net/ashishanexpert/zvcx5z38/5/

Answer 2

您无法按$scope.India中的值访问对象属性。您应该使用函数来检索给定国家/地区的城市。

$scope.getCityList = function(country)
{
     var index = arrayObjectIndexOf($scope.countries, country, ["country"]);
     return $scope.countries[index].cities;
}

function arrayObjectIndexOf(myArray, searchTerm, property) {
        for(var i = 0, len = myArray.length; i < len; i++) {
            var value = myArray[i];
            for(var j=0; j<property.length; j++)
            {
                value = value[property[j]];
            }
            if (value === searchTerm) return i;
        }
        return -1;
    }

最后，Angular JS代码得到：

 $scope.countryType = [
    { type: 'India', data:$scope.getCityList("India"), displayName:'India' },
     { type: 'China', data:$scope.getCityList("China"), displayName:'China'},
     { type: 'Ethiopia', data:$scope.getCityList("Ethiopia"), displayName:'Ethiopia'},
     { type: 'Cuba', data:$scope.getCityList("Cuba"), displayName:'Cuba'}
 ];

Answer 3

您可以遍历列表JSON并将其存储在数组中：

$scope.countryType = [];

angular.forEach(json.countries, function(data){
    $scope.countryType.push({type: data.country, data: data});
});

<强> Demo

Answer 4

您正在以错误的方式访问您的数据！在不更改JS代码的情况下，您可以使用以下代码，这些代码只是以稍微不同（但正确）的方式访问数据对象：

<ul ng-repeat = "country in countryType">
    <li ng-repeat="details in country.data.cities">
          <span> {{details.name}} </span>
          <span> {{details.rank}}</span>
    </li>
</ul>

一切都应该有效。

从angularjs访问json数据

4 个答案: