Popular select dynamic with javascript

Question

Popular select dynamic with javascript

Navigation

#1 by (1 votes)

0

I have two select, and I want the second to only show the data depending on the selection of the first one. What I lack is 'popular' the second select, because I already have the necessary data to put into it. As I'm starting with JS I do not know how to do this dynamically and I do not 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 fine, when I select an item, it calls the 'change' listener and searches for the required json file on the server with 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 picking up the data from the server

javascript html

asked by anonymous 07.03.2017 / 06:44

1 answer

Toggle text color according to background color How to make text scroll on android screen

score 1 · Accepted Answer

Do the following:

Within your getProduct specify the correct index in json:

$scope.products = result.product;

And see if it will return the result you expect.

I did a simulation below for you to 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><divng-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>

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