如何循環播放此JSON並將內容附加到div中的html？

我的JSON是這樣的：如何循環播放此JSON並將內容附加到div中的html？

{ 
     "content": [ 
     { 
      "title": "'I need some rest'", 
      "description": "Descript One", 
      "link": "http://www.google.com/?id=90#hhjjhjC-RSS", 
      "guid": "http://www.google.com/?id=90", 
      "pubDate": "Fri, 15 Oct 2002 08:27:27 GMT" 
     }, 
     { 
      "title": "I have no objection", 
      "description": "descroption will ne populated here", 
      "link": "http://www.google.com/?id=90#hhjjhjC-RSSRSS", 
      "guid": "http://www.google.com/?id=9werwer0", 
      "pubDate": "Fri, 14 Aug 2009 15:54:26 GMT" 
     }, 
     { 
      "title": "Mised the Buss", 
      "description": "Missed the bus decsription", 
      "link": "http://www.google.com/?CMP=OTC-RSS", 
      "guid": "http://www.google.com/", 
      "pubDate": "Fri, 21 Jul 2009 15:08:26 GMT" 
     } 



     ] 
    }

可有人指南中告訴我，我怎麼遍歷這個JSON並將其追加到HTML。我正在嘗試這樣的事情？

$(function() { 
      $.getJSON("http://crossdomain.com/path/to/abovejsonfile", function(data) { 
       $.each(data.item[0], function(index, it){ 
        var d = $('<div>'+ it.title +'</div>'); 
        alert(d); //doesn't work   
       }); 
      });

我呈現的頁面應該是這個樣子？

<div class="container"> 
<div class="node" id="n1"> 
<div class="title">Title should come here</div> 
<a class="link">Link</a> 
<div class='d'>Date should be here</div> 
</div> 

<div class="node" id="n2"> 
<div class="title">Title should come here</div> 
<a class="link">Link</a> 
<div class='d'>Date should be here</div> 
</div> 

<div class="node" id="n3"> 
<div class="title">Title should come here</div> 
<a class="link">Link</a> 
<div class='d'>Date should be here</div> 
</div> 
...... 
</div>

任何幫助深表謝意。

邁克

來源

2012-12-23 Mike

您需要遍歷data["content"]數組的元素：

$.each(data["content"], function(index, it){

來源

2012-12-23 14:48:20

我越來越[object object] aler t在這種情況下 – Mike

這是正確的行爲。您創建DOM元素（div），這是一個對象。嘗試傳遞'it.title'以提醒更詳細的輸出。或者使用瀏覽器的'console.log'和JavaScript控制檯檢查創建的div的內容。 –

你得到了每種方法的權利，但在每一個你告訴他與索引0

遍歷項目

$.each(data.item[0], ....

現在jQuery也可以迭代對象（http://docs.jquery.com/Utilities/jQuery.each），但那不是你現在想要的。

如果你想遍歷一個數組，每一個你必須傳遞一個數組（像其他任何支持each/foreach的語言一樣）！

所以只使用

$.each(data.item[0], ....

和你的代碼工作正常。

我如何追加與IDS聯繫/分隔成HTML格式：

$('<p>Hello World</p>').appendTo('body');

來源

2012-12-23 14:53:41 Stefan

我如何追加鏈接/ div與id到html – Mike

添加示例以回答 – Stefan

，這不會幫助。你可以幫助解析json嗎？ – Mike

保存你自己做這個手工使用循環的麻煩和使用客戶端模板引擎像json2html.com或pure

這裏是你正在尋找使用json2html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src='http://json2html.com/js/jquery.json2html-3.1-min.js'></script> 

<div id='container'></div> 

<script> 

var data = 
{ 
    "content": [ 
    { 
     "title": "'I need some rest'", 
     "description": "Descript One", 
     "link": "http://www.google.com/?id=90#hhjjhjC-RSS", 
     "guid": "http://www.google.com/?id=90", 
     "pubDate": "Fri, 15 Oct 2002 08:27:27 GMT" 
    }, 
    { 
     "title": "I have no objection", 
     "description": "descroption will ne populated here", 
     "link": "http://www.google.com/?id=90#hhjjhjC-RSSRSS", 
     "guid": "http://www.google.com/?id=9werwer0", 
     "pubDate": "Fri, 14 Aug 2009 15:54:26 GMT" 
    }, 
    { 
     "title": "Mised the Buss", 
     "description": "Missed the bus decsription", 
     "link": "http://www.google.com/?CMP=OTC-RSS", 
     "guid": "http://www.google.com/", 
     "pubDate": "Fri, 21 Jul 2009 15:08:26 GMT" 
    } 
    ] 
}; 

var template = {"tag":"div","id":function(obj,index) {return('n'+index);},"class":"node","children":[ 
{"tag":"div","class":"title","html":"${title}"}, 
{"tag":"a","class":"link","href":"${link}","html":"${link}"}, 
{"tag":"div","class":"d","html":"${pubDate}"} 
]}; 

$('#container').json2html(data.content,template); 

</script>

來源

2012-12-28 05:15:55

如何循環播放此JSON並將內容附加到div中的html？

回答

相關問題