如何呈現特定的JSON數據？

Question

我有一個從Joomla生成的JSON提要，我想知道如何使用Jquery在HTML中正確呈現此內容。

到目前為止，我設法渲染了一些數據，但是我不知道如何選擇某些屬性和值。

我的JSON

{
    "count": 2,
    "value": {
        "feedUrl": "http://example.com",
        "title": "content",
        "link": "http://example.com",
        "author": "",
        "description": "",
        "type": "application/json",
        "items": [
            {
                "title": "test",
                "link": "http://example.com/index.php/component/content/article/2-uncategorised/5-test?Itemid=101",
                "pubDate": "Mon, 13 Apr 2015 04:23:18 +0000",
                "description": " test test tetst"
            },
            {
                "title": "Module Variations",
                "link": "http://example.com/index.php/component/content/article/2-uncategorised/1-module-variations?Itemid=101",
                "pubDate": "Mon, 02 May 2011 11:45:23 +0000",
                "description": "<p>This theme comes with different <a href=\"http://example.com/index.php/what-we-do/register-your-child\">module styles</a>, badges and icons. For each module you can pick a style and combine it with an icon or badge to create your own unique look. Here is a list of the available options:</p><table class=\"zebra\"><tbody><tr class=\"odd\"><td class=\"bold\">Styles</td><td>Line, Headerline, Box</td></tr><tr><td class=\"bold\">Colors</td><td>Black, Grey, White, Color</td></tr><tr class=\"odd\"><td class=\"bold\">Badges</td><td>Hot, New, Free, Top</td></tr><tr><td class=\"bold\">Icons</td><td>Download, Twitter, Mail, Bubble, Login, Cart</td></tr></tbody></table>"
            }
        ]
    }
}

我的密碼

            <div id="json"></div>
                <script>
                $.getJSON( "test.json", function( data ) {


               var items = [];
              $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val+ "</li>" );
              });

              $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
              }).appendTo( "#json" );
            });

        </script>

我想生成這樣的東西：

<h1>Title</h1>
<p>Description</p> But from  the  "items" object.

只是一個更新！

我終於設法使其與以下代碼一起使用：

         <script>
           $.getJSON("http://example.com/logcabin/index.php?option=com_obrss&task=feed&id=3:content&format=json", function( data ) {
          var items = [];
          $.each( data.value.items,function( key, val ) {
            items.push( "<h3 id='" + key + "'>" + val.title + "</h3>" );
            items.push( "<p id='desc'>" + val.description + "</p>" );
          });

          $( "<div/>", {
            "class": "my-new-list",
            html: items.join( "" )
          }).appendTo( "#json" );
        });

       </script>

我不確定這是否是個好習慣，但正在為我工​​作。

並且確保我可以從剛剛添加的服務器中獲取數據：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Answer 1

您可以嘗試以下方法：

<script>
  $(document).ready(function() {
            $html = "";
            $.getJSON( "test.json", function( data ) {
               $.each(data.value.items,function(key,val) {
                 $html+='<li><h1>'+val.title+'</h1>';
                 $html+='<p>'+val.description+'</p></li>';
               });
               $('ul').appendTo($html);
            });
 });
    </script>