Вставить в HTML теги из JSON

Question

Итак, вот сделка: у меня есть объект JSON, сохраненный в моем веб-приложении в localStorage. Это JSON в настоящее время сохраняется в виде строки, с JSON.stringify, внутри одной из своих функций, на странице загрузки:

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

сохраняются данные, как это:

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

данных является результат запроса. Данные успешно сохраняются на главной странице, поэтому я могу использовать их позже. После этого мне нужно загрузить форму на другой странице, используя то, что я получил от данных.

У меня есть эта выберите тег на странице:

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

Что я хочу сделать, это просто: я использую json2html для добавления элементов этого выберите тег из данных, а значение параметра имеет КОД из данных. Итак, что я ожидал, так это:

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

делая это:

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.

Спасибо!

Answer 1

Вам не нужно преобразование для этого, попробуйте так:

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.

Answer 2

Я думаю, что в вашем коде есть несколько ошибок. Попробуйте вместо этого:

// 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 3

наиболее сразу вам нужно изменить:

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" 

Как вы в зависимости ID = «{$ CODE}», чтобы перевести то, которое он не будет делать автоматически.

Удачи вам!

Answer 4

По мере того, как вы начинаете, вы можете узнать больше о JavaScript от w3schools. Существует объект DOM, называемый Element, который вы можете использовать, чтобы добавить опцию в выборку.Вам просто нужно сделать что-то вроде:

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 5

$.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 6

ответить на актуальный вопрос о том, как сделать это в 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); 

Answer 7

{"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>'); 
     } 
    });