1

I try to reach following structure

a list of (distinct!) categories

  • Category 1
  • Category 2
  • Category n

And each Category links to the posts within the Category. And the posts link to the content

  • Post 1 Cat 1 --> Content Post 1 Cat 1
  • Post 2 Cat 2 --> Content Post 2 Cat 1

Question: I don't know how to create the distinct list of categories which leads to the posts. Any solutions?

This is my JSON example (this is from the json api plugin in wordpress)

{"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": "Post 1 Cat1",
        "content": "his is content for Post1 Cat 1.",
        "date": "2014-03-04 15:09:51",
        "modified": "2014-03-04 15:09:51",
        "categories": [
            {
                "id": 1,
                "title": "Category 1",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
    },
    {
        "id": 84,
        "type": "post",
        "slug": "kann-nicht-aktualisiert-werden",
        "url": "http://localhost/wordpress/?p=84",
        "status": "publish",
        "title": "Post 2 Cat1",
        "content": "<p>This is content for Post2 Cat 1.</p>\n",
        "date": "2014-03-04 15:09:25",
        "modified": "2014-03-04 15:09:25",
        "categories": [
            {
                "id": 1,
                "title": "Category 1",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
    },
        {
            "id": 74,
            "type": "post",
            "slug": "dieses-symbol-zeigt-an",
            "url": "http://localhost/wordpress/?p=74",
            "status": "publish",
            "title": "Post 1 Cat2",
            "content": "This is Content for Post1 Cat 2",
            "date": "2014-03-04 15:06:47",
            "modified": "2014-03-04 15:06:47",
            "categories": [
                {
                    "id": 2,
                    "title": "Category 2",
                    "description": "",
                    "parent": 0,
                    "post_count": 3
                }
            ],
        }
    ]}

And this my JS

$(document).on("pagecreate", "#page1", function(){
    var liste = $('#liste');

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

        for (var i = 0; i< data.categories.length; i++) {

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

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

DEMO

mariell
  • 23
  • 5

1 Answers1

1

I would approach it this way: Instead of a list, create a collapsible set where each child collapsible is a category, and each category collapsible contains a list of posts.

Here is your updated FIDDLE

So the top level HTML markup would be a collapsible set:

<div id="thelist" data-role="collapsibleset" data-theme="a" data-content-theme="a">       
</div>

Then the code:

var liste = $('#thelist');
var AllDynamicPages = '';
$.each(daten.posts, function(index1, data) {
    var postid = data.id;
    var postTitle = data.title;
    var postContent = data.content;        
    for (var i = 0; i< data.categories.length; i++) {
        var catid = data.categories[i].id;     
        var catTitle = data.categories[i].title;            
        //see if we already have this category, if not create new collapsible
        var $cat = $("#cat" + catid);
        if ($cat.length == 0){
            $cat = $('<div id="cat' + catid + '" data-role="collapsible"><h3>' + catTitle + '</h3><ul data-role="listview"></ul></div>');   
            liste.append($cat);
        }

        //create post link in category collapsible list
        var postlink = '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';
        $cat.find("ul").append(postlink);

        AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>'
    }        
});        
liste.enhanceWithin();
$("body").append(AllDynamicPages);

It is the same iteration as you had before, but now for each category, we check if there is already a collapsible for that category. If there is not we create one and add it to the set. Then we create a link for the post and add it the list widget within the category collapsible.

Finally we call .enhanceWithin() to apply jQM styling.

The dynamic pages part stays exactly the same.

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • For the external json: is it just $.ajax({ url: 'http://www.example.org/?json=1', type: 'GET', dataType: 'json', }); at the end of the js? – mariell Mar 06 '14 at 15:31
  • $.getJSON or $.ajax, but you might run into cross-domain issues where you should look into JSONP: http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about – ezanker Mar 06 '14 at 15:40
  • [Click here](http://jsfiddle.net/mariellel/7QTV9/4/) Is this the right way to include the JSON? Because I cant't see anything. – mariell Mar 06 '14 at 15:57
  • Use JSONP like this: http://jsfiddle.net/ezanker/7QTV9/5/ Because it is an asynchronous call, the page will be blank for a second or two and then the data will load... – ezanker Mar 06 '14 at 17:53
  • I have to thank you soooo much! :) You really did a great job! – mariell Mar 07 '14 at 07:49