Размещение значений JSON из ответа json в элементы HTML

Question

Каждые 2 секунды я отправляю сообщение POST, которое возвращает:

[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}]

У меня есть функция Javascript, которая собирает эту информацию, и мне бы хотелось, чтобы она также анализировала JSON и помещала значения в их соответствующие элементы.

function updateauctions(response) {
    //Parse JSON and place into HTML elements.

    //For debug purposes.
    alert(response);
}

Я использую jQuery и хотел бы узнать, как извлечь значения JSON и поместить их в элементы HTML.

Пример div .auctionbox:

<div id="60" class="auctionbox gold">
    //Other things here.
</div>

Например, у меня есть n количество элементов div с классом .auctionbox, и каждый из этих элементов имеет также идентификатор #i. Таким образом, каждый объект JSON соответствует одному .auctionbox. Как бы я поместил p значение JSON в соответствующий #i, .auctionbox?

На этом простом примере я могу начать работать над другими требованиями, мне просто нужно немного подтолкнуть. :)

Спасибо.

Answer 1

http://jsfiddle.net/mA4Ye/4/

Решение с использованием шаблона, если вам нужно выполнить некоторые конкретные HTML + CSS

HTML

<div id="data">
    <div class="template auctionbox"></div>
</div>

JS

var json = '[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},' +
    '{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},' +
    '{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},' +
    '{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}]';

var data = $.parseJSON(json);
var $template = $('.template');

$(data).each(function() {
    var $element = $template.clone().removeClass('template').appendTo('#data');
    $element.attr('id', this.i);
    $element.html(this.p);
});

Answer 2

setInterval(function() {
    $.getJSON('your-json-url', function(json) {
        $(json).each(function() {
            $('#'+this.i).html(this.p);
        });
    });
}, 2000);

надеюсь, это поможет

Answer 3

Я второй ответ Самича и говорю, использовать шаблонизатор, который специализируется на преобразовании JSON в HTML, как json2html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script>

<div id='list'></div>

<script>

var json =
[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}];

//Transform used to create the div
var transform = 
    {tag:'div',id:'.i',class:'actionbox gold',children:[
        {tag:'span',html:'.b'},
        {tag:'span',html:' + other stuff'}
    ]};

//Render the json into a list of divs
$('#list').json2html(json, transform);
</script>

Answer 4

Я думаю, вы хотите что-то вроде этого в вашей функции:

$.each(response, function(key, item) {
    $('#' + item.i).text(item.p);
});

Answer 5

при условии, что ответ json уже проанализирован для объекта js (используя dataType: "json" с помощью $.ajax() или установив необязательный 4-й параметр на "json" с помощью $.get() или $.post()), вы можете перебрать массив json используя $.each(), затем перейдите к каждому div, чтобы установить его значение.

$.each(response,function(i,item) {
  $("#id-" + item.i).html(item.p);
});

Примечание: идентификаторы не могут начинаться с цифры, они должны начинаться с буквенного символа. из-за этого я предположил, что вы добавите id к идентификаторам.

Изменить: вот как я бы предложил делать это каждые 2 секунды:

var timer;
(function ajaxInterval(){
  $.getJSON(url,data,function(){
    timer = setTimeout(function(){
      ajaxInterval();
    },2000);
  });
})();

Answer 6

Вы можете сделать:

var response = [{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}];

function updateauctions(response) {
    for (i=0; i<response.length; i++){
    //if the ids are unique just leave the class alone and select the div with the id
    var id = 'div#'+response[i].i;

    $(id).html(response[i].p);
    //For debug purposes.
    }
}

Answer 7

var obj = $.parseJSON(data); // data is the returned JSON string
for( var i in obj){
    $('.auctionbox'+i).html( obj[i].a );
}

Это добавит содержимое obj.a в div с классом .auctionbox0, auctionbox1 и т. Д.

Кроме того, я не уверен, что вы используете номера в качестве идентификаторовна элементах HTML.