Question

我的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          
                });
            });

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

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

非常感谢任何帮助。

麦克

Answer 1

您需要迭代data["content"]数组的元素：

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

Answer 2

使用循环手动保存您自己的麻烦，并使用客户端模板引擎，如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>

Answer 3

你得到了正确的方法，但在每个方法中你都告诉他用索引0迭代这个项目

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

现在jQuery也可以遍历对象（http://docs.jquery.com/Utilities/jQuery.each），但这不是你现在想要的。

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

所以只需使用

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

并且您的代码运行正常。

如何将带有ID的链接/ div添加到html：

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

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

3 个答案: