1

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

任何帮助都深表感谢。

麦克风

4

3 回答 3

2

您需要遍历data["content"]数组的元素：

$.each(data["content"], function(index, it){
于 2012-12-23T14:48:20.550 回答
1

省去使用循环手动执行此操作的麻烦，并使用客户端模板引擎，如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-28T05:15:55.383 回答
0

你得到了正确的 each 方法，但是在 each 中你告诉他迭代索引为 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');
于 2012-12-23T14:53:41.943 回答