CODEWITHSUNDEEP
javascriptgoogle-feed-api
Gius
Gius

Reputation: 21

Google feed api behaviour

I am eperimenting with google feed api. Basically I want a list of my feeds along with some information of the feed entries in order to process historical feeds normally not available on google reader. I am puzzled by one behaviour of google feed api which I document as comment in the code below. I am sure I don't get something since I am new to js.

This is the code with my question as comments:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" charset="UTF-8"  >


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

   /* Here I define the list of my feeds */

   var feeds=['MYFEED1', 'MYFEED2', 'AND SO ON'];

    function initialize() {
      for (var j=0;j<feeds.length;j++) {
        var feed = new google.feeds.Feed(feeds[j]);
        feed.includeHistoricalEntries();
        feed.setNumEntries(100);

        feed.load(function(result) {
            if (!result.error) {
            var container = document.getElementById("out");
            var furl = result.feed.feedUrl;
            var flink = result.feed.link;
            for (var i = 0; i < result.feed.entries.length; i++) {  
                var entry = result.feed.entries[i];

                var div = document.createElement("div");

                /* HERE IS WHERE I DON'T GET IT. 
                                feeds[j] always just shows the last feed in the array. 
                                But furl always shows the correct feedUrl
                Though if I uncomment alert("NEXT") few lines below 
                                thus giving a short pause, feeds[j] correctly 
                                shows the same url as feedUrl. Why?  */
                div.appendChild(document.createTextNode(feeds[j]+" "
                             +furl+" "+flink+" "+ entry.link + " " + entry.title)); 
                container.appendChild(div);
          }
        }
      });
     //alert("NEXT");
    }
}

    google.setOnLoadCallback(initialize);

    </script>
  </head>
    <body><div id="out" ></div>
  </body>
</html>

Also I would like to know if there's a way to set the values of the feeds array by querying a mysql database.

Upvotes: 1

Views: 347

Answers (1)

Harish
Harish

Reputation: 270

It appears to me that feed.load() is an ajax call and you are passing a call back function to execute on returning from the request. Because ajax is async, the outer for loop continues to execute and as a result you are always seeing the last feed in the array.

I believe closures should help you in this situation.

Consider placing the whole block inside outer for loop in a separate function and use closure. Something like this:

function initialize() {
for (var j = 0; j < feeds.length; j++) {
    (function(val) { //closure begin
        var j = val;
        var feed = new google.feeds.Feed(feeds[j]);
        feed.includeHistoricalEntries();
        feed.setNumEntries(100);

        feed.load(function(result) {
            if (!result.error) {
                var container = document.getElementById("out");
                var furl = result.feed.feedUrl;
                var flink = result.feed.link;
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];

                    var div = document.createElement("div");

                     /* HERE IS WHERE I DON'T GET IT. 
                            feeds[j] always just shows the last feed in the array. 
                            But furl always shows the correct feedUrl
            Though if I uncomment alert("NEXT") few lines below 
                            thus giving a short pause, feeds[j] correctly 
                            shows the same url as feedUrl. Why?  */
                    div.appendChild(document.createTextNode(feeds[j] + " " + furl + " "  + flink + " " + entry.link + " " + entry.title));
                    container.appendChild(div);
                }
            }
          }
        })(j); //Closure end
    });
    //alert("NEXT");
}​

Upvotes: 1

Related Questions