從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量與.auctionbox類的div和這些div中的每一個還具有#i的ID。所以每個JSON對象對應一個單獨的.auctionbox。我將如何將JSON的p值放入適當的#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

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

這將與類.auctionbox0，auctionbox1加obj.a內容到一個div等

而且，我不知道您的使用號碼作爲HTML元素的ID。

Answer 3

你可以這樣做：

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 4

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

希望這有助於

Answer 5

假設JSON響應已經被解析到一個js對象（使用dataType: "json"與$.ajax()或可選的第四個參數與設置爲"json"$.get()或$.post()），您可以使用$.each()循環瀏覽json數組，然後導航到每個div以設置它的值。

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

注意：id不能以數字開頭，它們必須以字母開頭。正因爲如此，我以爲你會添加ID-的ID。

編輯：這裏是如何，我建議做每2秒：

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

Answer 6

我想你想要的東西，你這樣的函數中：

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

Answer 7

我第二Samich的回答，並說使用專業轉換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>