Question

我有一个来自REST API的JSON respone。我需要将国家，州和城市的价值观转移到我的下拉列表中。我的默认值为全部。我需要推动这些国家，州和城市的发展。默认情况下，各个下降值中的值以及ALL作为第一个值。

我的输出是[ALL , Delhi]缺少班加罗尔。

响应：

 Geography : [{"countryname":"India","state":[{"statename":"Delhi",
"cities":[{"city":"Delhi"}]},{"statename":"Karnataka",
"cities":[{"city":"Bangalore"}]}]}]

HTML：

<form class="form-row " role="form">
    <div class="form-group">
        <label class="control-label col-sm-14" for="groupz">Country*</label>
        <select class="form-control" ng-model="model.selectedCountry" name="country" ng-change="GetCountry(model.selectedCountry)">
       <option ng-repeat=" item in model.countries track by $index" value="{{item}}">{{item}}</option>
      </select>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-20" for="groupz">State*</label>
        <select class="form-control" ng-model="model.selectedState" name="state" ng-change="GetState(model.selectedState)" ng-disabled="model.selectedCountry == 'ALL'">
<option ng-repeat="item in model.states track by $index" value="{{item}}">{{item}}</option> </select>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-20" for="groupz">City*</label>
        <select class="form-control" ng-model="model.selectedCity" name="city" ng-change="GetCity(model.selectedCity)" ng-disabled="model.selectedState == 'ALL' || model.selectedCountry== 'ALL'">
    <option ng-repeat="item in model.cities track by $index" value="{{item}}">{{item}}</option>
    </select>
    </div>

JS：

UserService.Geography(json).then(function(response) {

if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success') {
    var geography = response.json.response.geography;
    console.log("Geography : " + JSON.stringify(geography));


    $scope.model.countries = [];
    $scope.model.countries.push("ALL");

    for (var i = 0; i < geography.length; i++) {

        console.log(geography.length);



        $scope.model.countries.push(geography[i].countryname);
        console.log($scope.model.countries);

        if (($scope.model.countries != []) || ($scope.model.countries != null)) {

            console.log($scope.model.countries.length);

            for (var j = 0; j < $scope.model.countries.length; j++) {

                $scope.model.states = [];
                $scope.model.states.push("ALL");
                $scope.model.states.push(geography[i].state[i].statename);
                console.log($scope.model.states);

                if (($scope.model.states != []) || ($scope.model.states != null)) {

                    console.log($scope.model.states.length);
                    for (var k = 0; k < $scope.model.states.length; k++) {
                        $scope.model.cities = [];
                        $scope.model.cities.push("ALL");
                        $scope.model.cities.push(geography[i].state[i].cities[i].city);
                        console.log($scope.model.cities);

                        if (($scope.model.cities != []) || ($scope.model.cities != null)) {

                            $scope.model.segments = [];
                            var segments = "_ALL";

                            $scope.model.segments.push(segments);
                            console.log($scope.model.segments);

                        }
                    }
                    $scope.model.selectedCity = $scope.model.cities[0];
                }
            }
            $scope.model.selectedState = $scope.model.states[0];
        }
    }
    $scope.model.selectedCountry = $scope.model.countries[0];
}});
}
$scope.model.selectedCountry is the country selected by user in dropdown.

Answer 1

您的代码非常错误，您在嵌套循环中使用了i索引器，您应该使用j和k索引器。

所以我在angular.forEach的帮助下重写了代码，以提高代码的可读性。

请看一下。我也在我的最后测试过它。

$scope.model = {
        countries: ["ALL"],
        states: ["ALL"],
        cities: ["ALL"]
    };

    angular.forEach(geography, function(value, key) {
        var country = value;
        $scope.model.countries.push(country.countryname);

        if (country.state != null && country.state.length > 0) {

            angular.forEach(country.state, function(value, key) {
                var state = value;
                $scope.model.states.push(state.statename);

                if (state.cities != null && state.cities.length > 0) {

                    angular.forEach(state.cities, function(value, key) {
                        var city = value;
                        $scope.model.cities.push(city.city);
                    })
                }
            })
        }
    });

这很容易理解，但我还要解释我的所作所为。首先，您需要在所有三个数组ALL，countries和cities中推送states。

所以我写了一个对象，其中已经初始化的数组包含所有三个数组中的ALL字符串。

遍历地理数组
它会将当前国家/地区名称推送到国家/地区数组
然后检查该国家是否有任何州
如果没有，它会向前移动，否则它将遍历所有州。
在州和城市的情况下完成相同的序列。

希望澄清代码。如果您有任何疑问，请告诉我。希望能解决您的问题

Answer 2

var sourceJson = [{
  "countryname": "India",
  "state": [{
    "statename": "Delhi",
    "cities": [{
      "city": "Delhi"
    }]
  }, {
    "statename": "Karnataka",
    "cities": [{
      "city": "Bangalore"
    }]
  }]
}];


var countries = new Array();
var states = new Array();
var cities = new Array();

countries.push("ALL");
states.push("ALL");
cities.push("ALL");

for (var i = 0; i < sourceJson.length; i++) {

  countries.push(sourceJson[i].countryname);

  var sourceStates = sourceJson[i].state;

  for (var j = 0; j < sourceStates.length; j++) {

    states.push(sourceStates[j].statename);

    var sourceCities = sourceStates[j].cities;
    for (var k = 0; k < sourceCities.length; k++) {
      cities.push(sourceCities[k].city)

    }

  }

}

console.log(countries);
console.log(states);
console.log(cities);

将json响应中的值显示在下拉列表中

2 个答案: