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!

Answer 1

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.

Answer 2

$.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));
        });
    }
});

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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!