Insert into HTML select tag options from a JSON

Question

So, here's the deal: I have a JSON object saved in my web App at localStorage. This JSON is being saved as a string, with JSON.stringify, inside one of my functions, on the page load:

localStorage.setItem("MyData", JSON.stringify(data));

data is being saved like this:

[{"NAMEVAR":"Some Data 1","CODE":"1"},{"NAMEVAR":"Some Data 2","CODE":"2"}]

data is the result from a request. The data is being saved successfully at the home page, so i could use later. After that, i have to load up a form on another page, using what i got from data.

I have this select tag on the page:

<select id="mySelectID" name="select" class="main-form">
<option value="">None Selected</option>
</select>

What i want to do is simple: I'm using json2html to add items to this select tag from the data, and the option value has the CODE from data. So, what i expected to happen is:

<select id="mySelectID" name="select" class="main-form">
<option value="1">Some Data 1</option>
<option value="2">Some Data 2</option>
</select>

by doing this:

var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var transform = {tag:'option', id:'.CODE',html:'{$NAMEVAR}'};
document.getElementById('mySelectID').innerHtml = json2html.transform(jsonData,transform);

But this does not work, and i know it won't. The problem is that i do not know how to insert this JSON into options to my HTML. I thought that json2html could help me, but as i do not speak English natively, it's kinda of being hard for me to understand that, and I'm also new to JavaScript.

Thanks!

score 11 · Accepted Answer · answered Dec 10 '13 at 13:57

You don't need the transform for this, try it this way:

var jsonData = $.parseJSON(window.localStorage.getItem("data"));

var $select = $('#mySelectID');
$(jsonData).each(function (index, o) {    
    var $option = $("<option/>").attr("value", o.CODE).text(o.NAMEVAR);
    $select.append($option);
});

Here is a working fiddle.

score 8 · Answer 2 · answered Dec 10 '13 at 14:11

8

$.ajax({
    url:'test.html',
    type:'POST',
    data: 'q=' + str,
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
           $('#myselect').append($('<option>').text(value).attr('value', value));
        });
    }
});

answered Dec 10 '13 at 14:11

Prateek

6,785
2
24
37

2

Code-only answers are low value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please always explain how your solution works and why it is a good idea for the benefit of future researchers. – mickmackusa Jan 19 '19 at 00:41

Andy · Answer 3 · 2013-12-10T14:32:19.113

1

I think there are a couple of errors in your code. Try this instead:

// it's class, not id, and no fullstop required.
// The $ sign was in the wrong place.
var transform = {tag:'option', class:'$(CODE)', html:'${NAMEVAR}'};

// it's innerHTML not innerHtml
document.getElementById('mySelectID').innerHTML = json2html.transform(jsonData, transform);

edited Dec 10 '13 at 14:32

answered Dec 10 '13 at 13:56

Andy

61,948
13
68
95

score 1 · Answer 4 · answered Dec 10 '13 at 14:10

As you are starting you can learn more of JavaScript from w3schools. There is an DOM object called Element that you can use to add an option into select. You just need to do something like:

var el = document.getElementById('mySelectID'); //Get the select element
var opt = document.createElement('option'); //Create option element
opt.innerHTML = "it works!"; //Add a value to the option

el.appendChild(opt); //Add the option to the select element

score 1 · Answer 5 · answered Dec 12 '13 at 23:07

to answer the actual question on how to do this in json2html .. with the correct transform

var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var transform = {tag:'option', id:'${CODE}',html:'${NAMEVAR}'};
document.getElementById('mySelectID').innerHtml = json2html.transform(jsonData,transform);

OR using the jquery plugin for json2html

var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var transform = {tag:'option', id:'${CODE}',html:'${NAMEVAR}'};
$('#mySelectID').json2html(jsonData,transform);

score -1 · Answer 6 · answered Dec 10 '13 at 14:01

most immediately you need to change this:

var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var transform = {tag:'option', id:'.CODE',html:'{$NAMEVAR}'};

To this:

var jsonData = $.parseJSON(window.localStorage.getItem("MyData"));
var transform = {tag:'option', id:'{$CODE}',html:'{$NAMEVAR}'};

That's just a key to get to the data, so make sure you use the same key.

There may be some difficulty in rendering:

value="1"

As you are depending id="{$CODE}" to translate to that, which it will not do automatically.

Good luck!

Could the downvoter explain why he downvoted this? :O – Malavos Dec 12 '13 at 11:31 — Malavos, Dec 12 '13 at 11:31

Insert into HTML select tag options from a JSON

6 Answers6

Linked