Jquery 3.3.1 populate Dropdown from JSON object

Question

Trying to run a smaple example to parse a JSON object to the dropdown. Using latest jquery-3.3.1.js and IE 11. Coud some one correct the below sample ?

var test = { Cars: [{"CarType": "BMW","carID": "bmw123"},{"CarType": "mercedes","carID": "merc123"}, {"CarType": "volvo","carID": "vol123r"}, {"CarType": "ford", "carID": "ford123"}]};

$(document).ready(function(){           
  var mySelect = $('#reportingQuarter');
    $.each(test.Cars, function(key, value) {   
    mySelect.html($("<option></option>").attr("value",key).text(value)); 
    }); 
 })

<div class="col-md-4 mb-3">
 <label for="reportingQuarter">Reporting Quarter</label>
 <select class="form-control" id="reportingQuarter" required>
 <option value="">Please choose Report Quarter</option>
 </select>
   <div class="invalid-feedback">
   Please select Reporting Quarter.
   </div>
 </div>

Error: Dropdown showing only [object Object]

JSON is spelt without an A, and [that isn't JSON](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/). — Quentin, Mar 30 '18 at 13:24

Graciano · Accepted Answer · 2018-03-30T13:23:16.817

-1

Try this

$.each(test.Cars,function(key, value) {
  $("#mySelect").append($('<option></option>').val(value.carID).html(value.CarType));
});

edited Mar 30 '18 at 13:23

answered Mar 30 '18 at 13:19

Graciano

508
4
11

Reading from other posts, suggestion was to keep DOM components outside of loop. That was the reason, I have declared a variable for the SelectCombo outside of the loop. Mind updating the code ? – user3067524 Mar 30 '18 at 14:14
Thank you for your help. – user3067524 Mar 30 '18 at 14:14

score -1 · Answer 2 · answered Mar 30 '18 at 13:21

I don't wanna take away your coding style but seriously try this.

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var test = { Cars: [{"CarType": "BMW","carID": "bmw123"},{"CarType": "mercedes","carID": "merc123"}, {"CarType": "volvo","carID": "vol123r"}, {"CarType": "ford", "carID": "ford123"}]};

$(document).ready(function(){           
  var mySelect = $('#reportingQuarter');
    $.each(test.Cars, function(key, value) {   
    $("#reportingQuarter").append("<option value="+value.CarType+">"+value.CarType+"</option>"); 
    }); 
 })
</script>
<div class="col-md-4 mb-3">
 <label for="reportingQuarter">Reporting Quarter</label>
 <select class="form-control" id="reportingQuarter" required>
 <option value="">Please choose Report Quarter</option>
 </select>
   <div class="invalid-feedback">
   Please select Reporting Quarter.
   </div>
 </div>

Jquery 3.3.1 populate Dropdown from JSON object

2 Answers2