jsonレスポンスからドロップダウンリストへの値の表示

Question

私はREST APIのJSONレスポンを持っています。私は、国、州、都市の価値を私のドロップダウンに移す必要があります。私のデフォルト値はALLです。私はこれらの国、州、都市の値をそれぞれデフォルトで最初の値として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); 
        }) 
       } 
      }) 
     } 
    }); 

理解しやすいですが、私がやったことについてはまだ説明します。まず、countries,cities、statesのすべての配列にALLをプッシュする必要があります。

私はすでに初期化された配列を持つオブジェクトを、すべての3つの配列に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);