Как связать вложенные данные JSON в раскрывающийся список angularjs?

Question

У меня есть некоторые данные json, относящиеся к timzone ниже, мне нужно привязать определенное вложенное значение к раскрывающемуся списку, при использовании angularjs, в массиве часовых поясов он представлен в виде строкового формата, и мне нужно привязать их к раскрывающемуся списку.

часовой пояс.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"
          ]
        },
    }
    }

Сценарий -

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

HTML-контент

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

Answer 1

Сначала обработайте данные, а затем заполните, выберите

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);

});

Демо

Answer 2

Вы можете использовать следующее, чтобы перебрать ваши ключи объекта и заполнить ваш выбор.

<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>

Демо