Creating HTML Select from JSON objects

Question

I am trying to fill this HTML Select

<select id="list">
</select>

With data from JSON (the actual JSON contains more keys and values than shown below):

{"Group1": "TestGroup1", "Group2" : "TestGroup2" "TotGroups" : "2"}

Using JQuery and AJAX to fetch the data. AJAX Success response:

success: function(resp) {
var json_obj = $.parseJSON(resp); 
for (i=1, x=json_obj.TotGroups; i <= x; i++) {
$('#list').append('<option>'+json_obj.Group1+' </option>');
}

As you can see this only appends the data from json_obj.Group1. What I want is everytime the loop runs, append one group at a time, first Group 1, then Group 2, until TotGroups is reached (in this case 2).

Any ideas? :)

UPDATE: SOLVED

$('#list').append('<option>'+json_obj["Group" + i]+' </option>');

rckrd · Accepted Answer · 2016-12-22 13:04:54Z

If you want too iterate over all properties in a javascript object you can do so using a for..in statement, as shown below. Make sure to check that its direct property of the object with Object#hasOwnProperty.

Be aware that the for...in loop iterates over the properties of an object in an arbitrary order, so it no guarantee on the order.

If the order of the values is important use an Array. I've updated the example below so it show how you could do this with an array instead.

var data = {
  "Group1": "TestGroup1",
  "Group2": "TestGroup2"
};

for (var prop in data) {
  if(data.hasOwnProperty(prop)){
     $('#list').append('<option>' + data[prop] + ' </option>');
  }
}

var otherData = {listOptions: ['Option 1','Option 2','Option 3']}

for(var i = 0; i<otherData.listOptions.length;i++){
  $('#list2').append('<option>' + otherData.listOptions[i] + ' </option>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="list">
</select>
<select id="list2">
</select>

Jameson the dog · Accepted Answer · 2016-12-22 12:31:00Z

0

you can do something like

$('#list').append('<option>'+json_obj["Group" + i]+' </option>');

this will still work with your current JSON structure (using for requires you remove the TotGroups and I don't know if you can (external data))

answered Dec 22, 2016 at 12:31

Jameson the dog

1,8061 gold badge12 silver badges13 bronze badges

1 Comment

Jameson the dog Over a year ago

very happy to help :)

user7126329 · Accepted Answer · 2016-12-22 12:36:06Z

0

Iterate over the object and using it's key get the value:

for (var key in json_obj) {
  $('#list').append('<option>'+ json_obj[key] +' </option>');
}

If you use ES2015, this can be made more easy:

for (let [k, v] of Object.entries(json_obj)) {
  // here 'v' represents each group
  $('#list').append(`<option>${v}</option>`);
}

NOTE In loops the control variable must be start with 0 until n - 1.

answered Dec 22, 2016 at 12:36

user7126329

Comments

Vidyadhar Mandke · Accepted Answer · 2016-12-22 13:06:50Z

0

If you want to write the code using core java script without mixing any html code inside the JS code...

Try below solution -

var data = {"Group1": "TestGroup1", "Group2" : "TestGroup2", "TotGroups" : "2"}
var list_obj = document.getElementById("list");
var sel_opt = document.createElement("OPTION");
var i = 0;
for(k in data) { 
    var sel_opt_i = document.createElement("option");
    sel_opt_i.setAttribute("value", data[k])
    var opt_name_i = document.createTextNode(k);
    sel_opt_i.appendChild(opt_name_i);
    list_obj.appendChild(sel_opt_i);
    i++;
}

JS Fiddel url - https://jsfiddle.net/ryy6d4kf/23/

answered Dec 22, 2016 at 13:06

Vidyadhar Mandke

5881 gold badge12 silver badges28 bronze badges

Collectives™ on Stack Overflow

Creating HTML Select from JSON objects

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related