More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • jQueryMobile – JSON feed and dynamic list | 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] || "" : "";
        }
    })();