Popular dynamic select with javascript

Question

I have two select, and I want the second select only to show the data depending on the selection of the first. What I lack is 'popular' the second select, because I already have the necessary data to put in it. As I’m starting with JS I don’t know how to do this dynamically and I don’t know if it’s the best way to do it either.

HTML

<select id="selectCategory" 
        ng-model="selectedCategory" 
        ng-options="category as category.title for category in categories">
    <option value="">Escolha...</option>
</select>
<select id="selectProduct"
        ng-model="selectedProduct"
        ng-options="product as product.name for product in products">
    <option value="">Escolha...</option>
</select>

The first select is working right, when I select an item, calls the Listener 'change' and searches the required json file on the server with the getData()

JS

var selectCategory = document.getElementById("selectCategory");
var selectProduct  = document.getElementById("selectProduct");

// Aqui popula o primeiro select
DataService.getProducts().then(function (result) {
    console.log(result);
    $scope.categories = result.data.products;
}, function (err) {
    console.error(err);
});

function getData (data){
    DataService.getProduct(data).then(function (result) {
        $scope.products = result;
        console.log($scope.products); // <- aqui mostra o json correto
    }, function (err) {
        console.error(err);
    });
}

// evento chamado quando escolhido uma opção no primeiro select
selectCategory.addEventListener('change', function (){
    var i = selectCategory.selectedIndex -1;
    getData($scope.categories[i].name);

});

Example json that is loaded

{
  "product": [
    {
      "name": "Prod 1",
      "image": "www.google.com"
    },
    {
      "name": "Prod 2",
      "image": "www.google.com"
    }
  ]
}

What I have no idea how to do is how to put the data in the second select after grabbing the data from the server

Answer 1

Do the following:

Within your getProduct specify the correct json index:

$scope.products = result.product;

And see if it returns the result you expect.

I ran a simulation down here so you could see it working:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var result = {
    "product": [
      {
        "name": "Prod 1",
        "image": "www.google.com"
      },
      {
        "name": "Prod 2",
        "image": "www.google.com"
      }
    ]
  };
  
  $scope.products = result.product;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <select id="selectProduct"
          ng-model="selectedProduct"
          ng-options="product as product.name for product in products">
      <option value="">Escolha...</option>
  </select>
</div>

OBS.: The value of option is not being specified, only the label. Read more about ngOption here.