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

Question

My JSON looks like this:

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



      ]
    }

Can someone guide in telling me how do I loop over this JSON and append it to html. I was trying something like this?

$(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          
                });
            });

My rendered page should be like this?

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

Any help is deeply appreciated.

Mike

Answer 1

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

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

Answer 2

Save your self the hassle of doing this manually using loops and use a client side templating engine like json2html.com or pure

Here is what you're looking for using 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

You got the each method right, but in the each you tell him to iterate over the item with the index 0

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

Now jQuery can iterate over objects too (http://docs.jquery.com/Utilities/jQuery.each ) but that's not what you want right now.

If you want to iterate over an array, with each you have to passs an array (like in any other language which supports each/foreach)!

So just use

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

and your code works fine.

how do i append links/divs with ids to html:

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