Google Feed

This page shows the use of the jsRepeater with the Google AJAX Feed API. JSON coming from that API is transformed, using the jsRepeater into HTML. If you are not familiar with the JSON coming from Google have a look here.

Below is the code that makes this possible.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jsRepeater Example</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script 
        type="text/javascript" src="jquery.1.2.6.js"></script> 
        <script 
        type="text/javascript" src="jquery.jsrepeater.js"></script>

    <script language='javascript'>

    google.load("feeds", "1");
    
    function Initialise(){
        var feedpointer=new google.feeds.Feed('http://digg.com/rss/index.xml'); 
        feedpointer.load(display); 
    }
    function display(results){
        if ((results.error != null) && (results.error != undefined))
        {
            $('#Feeds').hide(); $('#FeedError').show(); $('#FeedError').fillTemplate(results);
        } else {
            $('#Feeds').show(); $('#FeedError').hide(); 
                    $('#Feeds').fillTemplate(results);
        }
    }

    </script>
</head>
<body onload='Initialise();'>
    <!-- Template to display in case of error -->
    <div id='FeedError'  style="display: none;">
        <strong>Feed Error</strong> : ${error.message}
    </div>
    <!-- Template to use for feed results -->
    <div id='Feeds'  style="display: none;">
        <div context='feed'>
            <strong>Title:</strong> <a href='${link}'>${title}</a><br />
            <strong>Description:</strong> ${description}<br />
            <strong>Author:</strong> ${author}<br />
            <div context='entries'>
                <br />
                <strong><a href='${link}' target='_new'>${title}</a></strong><br />
                <em>${publishedDate}</em>
                <br />
                ${content}<br />
            </div>
        </div>
    </div>
</body>
</html>