CODEWITHSUNDEEP
javascriptjqueryjsonajax
jobbin
jobbin

Reputation: 5

Creating HTML Select from JSON objects

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>');

Upvotes: 0

Views: 80

Answers (4)

Vidyadhar Mandke
Vidyadhar Mandke

Reputation: 588

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/

Upvotes: 0

rckrd
rckrd

Reputation: 3344

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>

Upvotes: 2

user7126329
user7126329

Reputation:

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.

Upvotes: 0

Jameson the dog
Jameson the dog

Reputation: 1806

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))

Upvotes: 0

Related Questions