Javascript 如何循环这个JSON并将内容附加到div中的html中？

我的JSON如下所示：

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

$（函数（）{
$.getJSON（“http://crossdomain.com/path/to/abovejsonfile，函数（数据）{
$.each（数据项[0]，函数（索引，it）{
变量d=$（''+it.title+''）；
警报（d）；//不起作用
});
});

我的呈现页面应该是这样的？

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

标题应该在这里
链接
日期应该在这里
标题应该在这里
链接
日期应该在这里
标题应该在这里
链接
日期应该在这里
......

非常感谢您的帮助

---

Mike

您需要迭代

数据[“内容”]

数组的元素：

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

---

您正确地使用了each方法，但是在each中，您告诉他使用索引0迭代该项

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

现在jQuery也可以迭代对象了(http://docs.jquery.com/Utilities/jQuery.each )但那不是你现在想要的

如果你想迭代一个数组，你必须通过一个数组（就像其他任何支持each/foreach的语言一样）

所以只要使用

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

你的代码运行良好

---

如何将带有ID的链接/div附加到html:

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

$（“helloworld
”）.appendTo（'body'）；

省去使用循环手动执行此操作的麻烦，并使用客户端模板引擎，如或

下面是您使用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>

风险值数据=
{
“内容”：[
{
“标题”：“我需要休息”，
“描述”：“描述一个”，
“链接”：http://www.google.com/?id=90#hhjjhjC-RSS“，
“guid”：”http://www.google.com/?id=90",
“发布日期”：“2002年10月15日星期五08:27:27 GMT”
},
{
“标题”：“我不反对”，
“描述”：“描述将在此处填充”，
“链接”：http://www.google.com/?id=90#hhjjhjC-RSSRSS“，
“guid”：”http://www.google.com/?id=9werwer0",
“发布日期”：“2009年8月14日星期五15:54:26 GMT”
},
{
“标题”：“米塞德的巴士”，
“说明”：“错过了公共汽车的说明”，
“链接”：http://www.google.com/?CMP=OTC-RSS“，
“guid”：”http://www.google.com/",
“发布日期”：“2009年7月21日星期五15:08:26 GMT”
}
]
};
var template={“tag”：“div”，“id”：函数（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）；

我如何将带有ID的链接/div附加到HTMLH中，这不会有帮助。您能帮助进行json解析吗？在这种情况下，我收到[object object]警报这是正确的行为。您创建DOM元素（div）这是一个对象。请尝试传递

it.title

以提醒有更多详细的输出。或者使用浏览器的

console.log

和JavaScript控制台检查创建的div的内容。