Populate two Selects with nested JSON data

Question

I have previously used a working version of a previous post (Use jQuery to change a second select list based on the first select list option) to populate two select boxes - one with a wholesaler name (#wholesaler_name), and then the second with a list of cities that the selected wholesaler covers (#wholesaler_city).

The JSON data source has been extended from the original, and now includes an id for each city, and I'm struggling to get my head around how to extract the data for locations and id, shown below.

Old structure was:

{
  "Wholesaler 1": [
    "City 1",
    "City 2",
    "City 3"
  ],
  "Wholesaler 2": [
    "City 4",
    "City 5",
    "City 6"
  ]
}

The new JSON structure is:

{
  "Wholesaler 1": {
      "locations": [
          { "name":"City 1", "id":"12345" },
          { "name":"City 2", "id":"56789" },
          { "name":"City 3", "id":"01234" }
      ]
    },
    "Wholesaler 2": {
      "locations": [
          { "name":"City 4", "id":"34567" },
          { "name":"City 5", "id":"89012" },
          { "name":"City 6", "id":"34567" }
      ]
    }
}

The aim is to use the data to populate two select boxes, with the second changing based on the value of the first (as in the post referenced above). The code I'm using is as follows:

$(document).ready(function () {


 "use strict";

 var selectData, $wholesaler;

 function updateSelects() {
   var cities = $.map(selectData[this.value], function (wholesaler) {
     return $("<option />").text(wholesaler);
   });

   $("#wholesaler_city").empty().append(cities);
 }

 $.getJSON("wholesalers-test.json", function (data) {

  var state;
  selectData = data;
  $wholesaler = $("#wholesaler_name").on("change", updateSelects);
    for (state in selectData) {
       $("<option />").text(state).appendTo($wholesaler);
    }
    $wholesaler.change();

  });
});

So I need to amend the "cities" variable to extract the value of "locations/name" for each entry, and also I'll need to create a separate "id" variable from the id of each city.

However, although the first select is populated with the wholesaler names, the 2nd is just one entry of [object Object], [object Object] etc.

I've tried any number of combinations of dot and bracket notation to try and get the data out, but I know I'm missing something obvious - this isn't my usual area so any pointers would be much appreciated!

score 0 · Answer 1 · answered May 03 '18 at 14:25

Since cities become an array of objects, you need to also loop though this array to add options one by one. In addition, you need to use the attributes of each city object as the text and value of each option.

$(document).ready(function(){

 "use strict";

 var selectData, $wholesaler;

 function updateSelects() {
   var cities = $.map(selectData[this.value], function (wholesaler) {
   var options = [];
    if(wholesaler.length > 0){
     wholesaler.map(function(city){
       options.push($("<option />").text(city.name).val(city.id));
      });
    }
    return options;
   });
   $("#wholesaler_city").empty().append(cities);
 }

//$.getJSON("wholesalers-test.json", function (data) {
    var state;
    selectData = {
    "Wholesaler 1": {
        "locations": [
            { "name":"City 1", "id":"12345" },
            { "name":"City 2", "id":"56789" },
            { "name":"City 3", "id":"01234" }
        ]
      },
      "Wholesaler 2": {
        "locations": [
            { "name":"City 4", "id":"34567" },
            { "name":"City 5", "id":"89012" },
            { "name":"City 6", "id":"34567" }
        ]
      }
  };;
    $wholesaler = $("#wholesaler_name").on("change", updateSelects);
      for (state in selectData) {
         $("<option />").text(state).appendTo($wholesaler);
      }
      $wholesaler.change();
//});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wholesaler_name"></select>
<select id="wholesaler_city"></select>

score 0 · Answer 2 · answered May 03 '18 at 14:26

You need to make the following changes to your code:

function updateSelects() {
  var wholesaler = selectData[value];
  var cities = [];
  for (var idx in wholesaler.locations){
    cities.push("<option>" + wholesaler.locations[idx].name + "</option>");
  }   

  $("#wholesaler_city").empty().append(cities);
 }

Instead of trying to use jQuery's convenience function, in your case it's simpler to just compile the html manually in a simple loop.

Populate two Selects with nested JSON data

2 Answers2