Geek Answers Handbook

Insert HTML tags from JSON

So here is the deal: I have a JSON object stored in my web application in localStorage. This JSON is saved as a string with JSON.stringifyinside one of my functions when the page loads:

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

data is saved as follows:

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

data is the result of a query. The data is successfully saved on the main page, so I can use it later. After that I need to load the form on another page, using what I got from the 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 use json2html to add elements to this select tag from the data, and the parameter value has CODE from the data. So, I expected this to happen:

<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 the following:

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

, , . , , JSON HTML. , json2html , - -, - , JavaScript.

!

+4
7

, :

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

fiddle.

+9
$.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));
        });
    }
});
+8
{"person": [
  {
    "id": "1",
    "name": "Person1"
  },
  {
    "id": "2",
    "name": "Person2"
  },
  {
    "id": "3",
    "name": "Person3"
  }
]}

HTML:

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <select id="people"></select>
  </body>
</html>

JQuery

  $select = $('#people');
    //request the JSON data and parse into the select element
    $.ajax({
      url: 'person.JSON',
      dataType:'JSON',
      success:function(data){
        //clear the current content of the select
        $select.html('');
        //iterate over the data and append a select option
        $.each(data.person, function(key, val){
          $select.append('<option id="' + val.id + '">' + val.name + '</option>');
        })
      },
      error:function(){</strong>
        //if there is an error append a 'none available' option
        $select.html('<option id="-1">none available</option>');
      }
    });
+2

, . :

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

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

, , JavaScript w3schools. DOM, , . - :

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
+1

, json2html..

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

jquery plugin json2html

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

:

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

:

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

, , .

:

value="1"

Since you depend on id = "{$ CODE}" to translate to this, which it won’t do automatically.

Good luck

-1
source

More articles:


All Articles