CODEWITHSUNDEEP
javascriptjqueryhtmljsonjson2html
Malavos
Malavos

Reputation: 427

Insert into HTML select tag options from a JSON

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!

Upvotes: 6

Views: 29207

Answers (6)

Chad Brown
Chad Brown

Reputation: 1667

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

Upvotes: 1

Andy
Andy

Reputation: 63524

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

Upvotes: 1

Prateek
Prateek

Reputation: 6965

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

Upvotes: 8

Diego Bezerra
Diego Bezerra

Reputation: 46

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

Upvotes: 1

Jeremy
Jeremy

Reputation: 285

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!

Upvotes: -1

Esko
Esko

Reputation: 4207

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.

Upvotes: 11

Related Questions