Using only JavaScript how do I populate JSON data in selectbox

Question

I want to populate JSON data in select box using only JavaScript. I cant use either JQuery or Angular.

Here is my HTML

<select name="fieldType" id="fieldType">
    <option value="selectFieldType">Select Field Type</option>  
</select>

And here is my JSON

"records": [
    "Date",
    "String"
]

Could you please guide me how do I solve this one.

Give a couple more examples in the records array, and also show expected output. We can code like mad, but we can't read minds ;) — Reinstate Monica Cellio, Dec 21 '17 at 12:13
But you can use search, ja? https://stackoverflow.com/a/17002049/185426 — omalyutin, Dec 21 '17 at 12:16
Thanks Archer for the text. I am new in JS that is why might be unable to describe more. Here the JSON is coming from a REST Service. — Soma, Dec 21 '17 at 15:42

score 2 · Answer 1 · answered Dec 21 '17 at 12:28

Steps to do,

First Parse JSON
Calculate length of Parsed JSON array
Loop over json array to get each record
Append into your html

    var key = '{"records": ["Date","String"]}';
    var obj = JSON.parse(key);

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

var size = Object.keys(obj.records).length;
var selectHTML = '<option value="selectFieldType">Select Field Type</option>';
for(i=0;i<size;i++){
   selectHTML+= '<option value="'+obj.records[i]+'">'+obj.records[i]+'</option>';
}

document.getElementById("fieldType").innerHTML = selectHTML;

<select name="fieldType" id="fieldType">
    <option value="selectFieldType">Select Field Type</option>  
</select>

score 0 · Answer 2 · answered Dec 21 '17 at 12:19

0

var text = "<select name='fieldType' id='fieldType'>";
for (i = 0; i < records.length ; i++) {
    text += "<option>" + records[i] + "</option>";
}
text += "</select>";
document.getElementById("demo").innerHTML = text;

answered Dec 21 '17 at 12:19

Siva Rm K

284
1
6

score 0 · Answer 3 · answered Dec 21 '17 at 12:24

You can use this code --

var node =document.getElementById("fieldType");
for(i=0;i<data.length;i++){
var option = document.createElement("option");
option.text = data[i];
//option.value = data[i];
node.add(option);
}

Here is the working sample --

https://jsfiddle.net/8n2tp25h/

score 0 · Accepted Answer · answered Dec 21 '17 at 13:25

0

Simply parse the JSON and add elements from within a loop

var myJsonStr = '{"records": ["Date","String"]}';
var myJson = JSON.parse(myJsonStr);

var sel = document.getElementById("fieldType");

for(let i=0; i < myJson.records.length; i++){
  let opt = document.createElement('option');
  opt.value = i;
  opt.text = myJson.records[i];
  sel.add(opt);
}

<select name="fieldType" id="fieldType">
    <option value="selectFieldType">Select Field Type</option>  
</select>

answered Dec 21 '17 at 13:25

JoshKisb

742
7
9

Hi Josh, Thanks for the solution. Here "add" func is not working in my code. Getting error: TypeError: Cannot read property 'add' of null – Soma Dec 21 '17 at 16:28
that means you did not manage to get the element using getElementById. make sure there is no typo in id name – JoshKisb Dec 21 '17 at 16:51
You are correct. But I do not understand why I am getting "null" for the var sel. My html is same as I have posted in my question. Please guide me. – Soma Dec 22 '17 at 05:24
@Soma post the fiddle link to code that is generating error – JoshKisb Dec 22 '17 at 07:25
Thanks a ton Josh.Now your solution works in my application perfectly. If you dont mind I like to ask one question on top of this. My question is, using JavaScript only how do I populate only the selected data from JSON? Could you please guide me on this. – Soma Dec 22 '17 at 08:35

Using only JavaScript how do I populate JSON data in selectbox

4 Answers4