John Chacko

How to dynamically populate a jQueryMobile listview from JSON data?

Here is a sample application using google news feed and populating listview.
Clicking an item in the list dynamically creates a new page ans shows the content of the news.


A Full Demo can be seen here

google_feed_list.js

(function () {
    var googleResult = [];
    var newsTopic = "w";

    function initialize() {
        var feed = new google.feeds.Feed("https://news.google.com/news/feeds?pz=1&cf=all&ned=en_ie&hl=en&topic=" + newsTopic + "&output=rss");
        feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
        //feed.includeHistoricalEntries();
        feed.setNumEntries(100);
        feed.load(function (result) {
            if(!result.error) {
                googleResult = result;
                var output = '<ul data-role="listview" xdata-filter="true">';
                var container = document.getElementById("feed");
                for(var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    output += '<li>';
                    output += '<a href= "#feedContent?i=' + i + '" >';
                    output += '<h1>' + entry.title + '</h1>';
                    output += '<p>' + entry.contentSnippet + '</p>';
                    output += '</a>';
                    output += '</li>';
                }
                output += '</ul>';
                $('#newsList').html(output);
                $('#newsList').trigger('create');
                $.mobile.loading("hide");
            }
        });
    };

    google.load("feeds", "1");
    google.setOnLoadCallback(initialize);

    $(document).on("pagebeforechange", function (e, data) {
        // We only want to handle changePage() calls where the caller is
        // asking us to load a page by URL
        if(typeof data.toPage === "string") {
            // We are being asked to load a page by URL
            var u = $.mobile.path.parseUrl(data.toPage),
                _re = "#feedContent";

            if(u.hash.search(_re) !== -1) {
                var i = urlParam("i", data.toPage);
                $("#feedContent").remove();
                var $page = $("<div data-role='page' id='feedContent' data-add-back-btn='true'><div data-role='header'><h1>" + googleResult.feed.entries[i].title + "</h1></div></div>");
                var $content = $("<div data-role='content' id='feedContent'></div>");
                $content.append(googleResult.feed.entries[i].content);
                $page.append($content);
                $.mobile.pageContainer.append($page);
            }

            _re = "#feeds";
            if(u.hash.search(_re) !== -1) {
                newsTopic = urlParam("topic", data.toPage);
                e.preventDefault();
                $.mobile.loading("show");
                initialize();
                return;
            }
        }
    });


    // Determine url param
    var urlParam = function (name, url) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
        return results !== null ? results[1] || "" : "";
    }
})();