how to bind nested json data into angularjs dropdown?

Question

I have some json data related to timzone below i need to bind particular nested value into dropdown, in using angularjs, in timezone array its coming as string format i need to bind those into dropdown.

timezone.json --

 {
      "countries": {
     "US": {
          "id": "US",
          "name": "United States",
          "timezones": [
            "America/New_York",
            "America/Detroit",
             ]
        },
     "CA": {
          "id": "CA",
          "name": "Canada",
          "timezones": [
            "America/St_Johns",
            "America/Halifax",
           ]
        },
    "IN": {
          "id": "IN",
          "name": "India",
          "timezones": [
            "Asia/Kolkata"
          ]
        },
    }
    }

Script--

$http({
    method: "GET",
    url: 'timezon.json'
}).then(function mySuccess(response) {
    $scope.timeZones = response.data;
}, function myError(response) {
    $scope.timeZones = response.statusText;
});

HTML Content

 <select class="form-control">
        <option value="0">--Select Time Zones></option>
  </select>

NTP · Accepted Answer · 2019-02-12 11:28:19Z

3

You can use the following to iterate through your object keys and populate your select.

<select class="form-control">
    <option value="0">--Select Time Zones></option>
    <option ng-repeat="(key, value) in data.countries" value="value.id">{{value.timezones.toString()}}</option>
</select>

Demo

answered Feb 12, 2019 at 11:28

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PK-1825 Over a year ago

thank you much bro, but small changes times zone value coming continues in dropdown. i want like this. next.plnkr.co/edit/2vj4PK?p=preview&preview

NTP Over a year ago

@PK-1825 what is your expected output?

PK-1825 Over a year ago

timezone value should come under respected country, in dropdown.

Omar Makled · Accepted Answer · 2019-02-12 12:34:53Z

First off manipulate data and then populate select

HTML

<div ng-app="app" ng-controller="Ctrl" ng-init="getTimeZones">
  <h1>{{selectedTimezone}}</h1>
<select ng-model="selectedTimezone" ng-options="item for item in timezones">
</select>
</div>

JS

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

app.controller('Ctrl', function($scope, $filter) {
  $scope.timezones = []
  $scope.data = {
    "countries": {
     "US": {
          "id": "US",
          "name": "United States",
          "timezones": [
            "America/New_York",
            "America/Detroit",
             ]
        },
     "CA": {
          "id": "CA",
          "name": "Canada",
          "timezones": [
            "America/St_Johns",
            "America/Halifax",
           ]
        },
    "IN": {
          "id": "IN",
          "name": "India",
          "timezones": [
            "Asia/Kolkata"
          ]
        },
    }
  }

  $scope.getTimeZones = setTimeout(function(){ 
    // http request here after success
    for (var key in $scope.data.countries) {
      var timezones = $scope.data.countries[key].timezones;
      timezones.unshift($scope.data.countries[key].name);
      Array.prototype.push.apply($scope.timezones, timezones);
      // For ES6
      // $scope.timezones.push(...timezones)
    }

  }, 1000);

});

Demo

Collectives™ on Stack Overflow

how to bind nested json data into angularjs dropdown?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related