JSON嵌套对象Web应用

Question

So I'm trying to program a Web App (later hyprid app via Phonegap) which has Wordpress has backend (information will be dynamically load through json api)

But I'm stuck at the first step.

I want a menu where like this

• Category 1
• Category 2
• Category 3

and the single categories link to the posts in the categorie

Here is a part of my 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>
",
        "excerpt": "<p>Das Feature ist inaktiviert.</p>
",
        "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>
",
        "excerpt": "<p>Das Feature kann nicht aktualisiert werden, der Fehler kann über das Fehlermanagement bzw. über Bearbeiten behoben werden.</p>
",
        "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>
",
        "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>
",
        "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
            }
        ],

I tried to start programming but as I am a newbie in programming with ajax js I'm kinda lost

Here is my code I started writing, but it doesnt't show anything:

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

Answer 1

In your JSON, posts is an array of objects each of which contains a property called categories which is also an array of objects. So you $.each() should iterate over posts, and then within the each you need to iterate categories. You could do it like this:

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

NOTE: it is not clear from your JSON whether you really want the category ID which is not unique accross posts or the post id. So you will probably need to tweak the code to show the correct output...