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または純粋なクライアント側のテンプレート エンジンを使用します。

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 ) が、それは今必要なことではありません。

配列を反復処理したい場合は、それぞれに配列を渡す必要があります (each/foreach をサポートする他の言語のように)!

だからただ使う

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

あなたのコードは正常に動作します。

ID付きのリンク/divをhtmlに追加するにはどうすればよいですか:

$('<p>Hello World</p>').appendTo('body');
于 2012-12-23T14:53:41.943 に答える