Using Phonegap, Json and jQuery mobile, how to make a list of titles linking to the individuel articles

Question

I used Json to get data off a site build in Wordpress (using the Json API plugin). I'm using jQuery mobile for the layout of the application in Phonegap. Getting the data to display in Phonegap wasn't the hardest thing to find (code below). But, is it possible to make a list of the titles of different posts and linking them to the specific article and loading the content in a page? In PHP you could just use an argument but is there a way to make something like this work in jQuery mobile?

Here's code I used. Also handy if someones happens to come across this post using google.

    <script>          
        $(document).ready(function(){
            var url="http://127.0.0.1:8888/wp/api/get_recent_posts";
            $.getJSON(url,function(json){
                $.each(json.posts,function(i,post){
                    $("#content").append(
                    '<div class="post">'+
                    '<h1>'+post.title+'</h1>'+
                    '<p>'+post.content+'</p>'+
                    '</div>'
                    );
                });
            });
        });
    </script> 

EDIT:

I'd like to thank shanabus again for helping me with this. This was the code I got it to work with:

    $(document).ready(function() {

        var url="http://127.0.0.1:8888/wpjson/api/get_recent_posts";
        var buttonHtmlString = "", pageHtmlString = "";

        var jsonResults;

        $.getJSON(url,function(data){
            jsonResults = data.posts;
            displayResults();       
        });

        function displayResults() {

            for (i = 0; i < jsonResults.length; i++) {
                buttonHtmlString += '<a href="#' + $.trim(jsonResults[i].title).toLowerCase().replace(/ /g,'') + '" data-role="button">' + jsonResults[i].title + '</a>';
                pageHtmlString += '<div data-role="page" id="' + $.trim(jsonResults[i].title).toLowerCase().replace(/ /g,'') + '">';
                pageHtmlString += '<div data-role="header"><h1>' + jsonResults[i].title + '</h1></div>';
                pageHtmlString += '<div data-role="content"><p>' + jsonResults[i].content + '</p></div>';
                pageHtmlString += '</div>';
            }

            $("#buttonGroup").append(buttonHtmlString);
            $("#buttonGroup a").button();
            $("#buttonGroup").controlgroup();
            $("#main").after(pageHtmlString);
        }

    });

Answer 1

Yes, this is possible. Check out this example: http://jsfiddle.net/shanabus/nuWay/1/

There you will see that we take an object array, cycle through it and append new buttons (and jqm styling). Does this do what you are looking to do?

I would also recommend improving your javascript by removing the $.each and substituting it for the basic for loop:

for(i = 0; i < json.posts.length; i++)

This loop structure is known to perform better. Same with the append method. I've heard time and time again that its more efficient to build up a string variable and append it once rather than call append multiple times.

UPDATE

In response to your comment, I have posted a new solution that simulates loading a Json collection of content objects to dynamically add page elements to your application. It also dynamically generates the buttons to link to them.

This works if you do it in $(document).ready() and probably a few other jQM events, but you may have to check the documentation on that or call one of the refresh content methods to make the pages valid.

http://jsfiddle.net/nuWay/4/

Hope this helps!