JSON嵌套对象Web应用程序

时间:2014-03-05 10:54:41

标签: ajax json wordpress jquery-mobile

所以我正在尝试编写一个Web应用程序(后来通过Phonegap推出的hyprid应用程序),它具有Wordpress后端(信息将通过json api动态加载)

但是我第一步陷入困境。

我想要一个像这样的菜单

  • 第1类
  • 第2类
  • 第3类

并且单个类别链接到类别中的帖子

这是我的json的一部分

{
"status": "ok",
"count": 10,
"count_total": 20,
"pages": 2,
"posts": [
    {
        "id": 86,
        "type": "post",
        "slug": "inaktiviert",
        "url": "http://localhost/wordpress/?p=86",
        "status": "publish",
        "title": "Inaktiviert",
        "title_plain": "Inaktiviert",
        "content": "<p>Das Feature ist inaktiviert.</p>\n",
        "excerpt": "<p>Das Feature ist inaktiviert.</p>\n",
        "date": "2014-03-04 15:09:51",
        "modified": "2014-03-04 15:09:51",
        "categories": [
            {
                "id": 6,
                "slug": "symbole-fuer-verschiedene-ereignisse",
                "title": "Symbole für verschiedene Ereignisse",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
        "tags": [],
        "author": {
            "id": 1,
            "slug": "admin",
            "name": "admin",
            "first_name": "",
            "last_name": "",
            "nickname": "admin",
            "url": "",
            "description": ""
        },
        "comments": [],
        "attachments": [],
        "comment_count": 0,
        "comment_status": "open",
        "custom_fields": {}
    },
    {
        "id": 84,
        "type": "post",
        "slug": "kann-nicht-aktualisiert-werden",
        "url": "http://localhost/wordpress/?p=84",
        "status": "publish",
        "title": "kann nicht aktualisiert werden",
        "title_plain": "kann nicht aktualisiert werden",
        "content": "<p>Das Feature kann nicht aktualisiert werden, der Fehler kann über das Fehlermanagement bzw. über Bearbeiten behoben werden.</p>\n",
        "excerpt": "<p>Das Feature kann nicht aktualisiert werden, der Fehler kann über das Fehlermanagement bzw. über Bearbeiten behoben werden.</p>\n",
        "date": "2014-03-04 15:09:25",
        "modified": "2014-03-04 15:09:25",
        "categories": [
            {
                "id": 6,
                "slug": "symbole-fuer-verschiedene-ereignisse",
                "title": "Symbole für verschiedene Ereignisse",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
        "tags": [],
        "author": {
            "id": 1,
            "slug": "admin",
            "name": "admin",
            "first_name": "",
            "last_name": "",
            "nickname": "admin",
            "url": "",
            "description": ""
        },
        "comments": [],
        "attachments": [],
        "comment_count": 0,
        "comment_status": "open",
        "custom_fields": {}
    },


    {
        "id": 78,
        "type": "post",
        "slug": "das-braune-zahnrad",
        "url": "http://localhost/wordpress/?p=78",
        "status": "publish",
        "title": "Das braune Zahnrad",
        "title_plain": "Das braune Zahnrad",
        "content": "<p>Das braune Zahnrad und der rote Blitz zeigen an, dass die Teilereferenz kontextabhängig ist und dass dieses Exemplar nicht in der Teiledefinition verwendet wird. Dieses Kontextteil kann bearbeitet werden. Dieses Symbol wird möglicherweise angezeigt, wenn ein Kontextteil in ein anderes CATProduct kopiert/eingefügt wird, ohne dabei die Kon-textverknüpfungen zu berücksichtigen</p>\n",
        "excerpt": "<p>Das braune Zahnrad und der rote Blitz zeigen an, dass die Teilereferenz kontextabhängig ist und dass dieses Exemplar nicht in der Teiledefinition verwendet wird. Dieses Kontextteil kann bearbeitet werden. Dieses Symbol wird möglicherweise angezeigt, wenn ein Kontextteil in ein anderes CATProduct kopiert/eingefügt wird, ohne dabei die Kon-textverknüpfungen zu berücksichtigen</p>\n",
        "date": "2014-03-04 15:07:23",
        "modified": "2014-03-04 15:07:29",
        "categories": [
            {
                "id": 5,
                "slug": "symbole-fuer-kontextteile",
                "title": "Symbole für Kontextteile",
                "description": "",
                "parent": 0,
                "post_count": 3
            }
        ],

我尝试开始编程,但因为我是ajax js编程的新手,我有点失落

这是我开始写的代码,但它没有显示任何内容:

        <script>
        $(document).ready(function(){
            var liste = $('#liste');
            $.ajax({
                url: 'http://localhost/wordpress/?json=1',
                dataType: 'jsonp',
                success:
                 function(daten) {
                     var data = $.parseJSON(daten)
                    $.each(daten.categories, function(index, datensatz) {
                        $('<li><a href="#page' + datensatz.id + '">' + datensatz.title + '</a></li>').appendTo(liste);
                        $('<div data-role="page" data-add-back-btn="true" id="page' + datensatz.id + '"><div data-role="header"><h1>' + 
                        datensatz.title + '</h1></div><div data-role="content">' + datensatz.content + '</div></div>').appendTo('body');
                    });
                    liste.listview("refresh");
                }
            });
        });
    </script>

1 个答案:

答案 0 :(得分:1)

在您的JSON中,posts是一个对象数组,每个对象都包含一个名为categories的属性,该属性也是一个对象数组。所以你$ .each()应该迭代帖子,然后在每个你需要迭代类别。你可以这样做:

var liste = $('#liste');

var AllListItems = '';
var AllDynamicPages = '';
$.each(daten.posts, function(index1, datensatz) {
    var postid = datensatz.id;
    var postTitle = datensatz.title;
    var postContent = datensatz.content;

    for (var i = 0; i< datensatz.categories.length; i++) {
        var catid = datensatz.categories[i].id;     
        var catTitle = datensatz.categories[i].title;            
        AllListItems += '<li><a href="#page' + catid + '">' + catTitle + '</a></li>';    
        AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + catid + '"><div data-role="header"><h1>' + catTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>'
    }        
});

liste.empty().append(AllListItems).listview("refresh");
$("body").append(AllDynamicPages);
  

<强> DEMO

注意:从您的JSON中不清楚您是否真的想要在帖子或帖子ID之外不是唯一的类别ID。因此,您可能需要调整代码以显示正确的输出...