Multiple entries/posts javascript google feed

Question

Can't figure out why my loop duplicates the results? I trying to fetch RSS feeds from the kalRss = rss url. It gets everything but it duplicates the entries in a weird way. If you look in the firebug console you can se that there is only 3 entries. http://www8.umu.se/project/rut/display/index.html

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("feeds", "1");
    var kalRSS = "http://www.upc.umu.se/om-upc/kalendarium/prenumerera/kalender-rss/?categories=concert,conference,courseEducation,culturOnCampus,dissertation,exhibition,lecture,licentiateSeminar,meeting,theOthers,seminar,seminarSeries,workshop&whoCanAttend=employees&calendarIds=69&fromSiteNodeId=45897";
    function initialize() {
        console.log("initialize");
        var container = $('#dailyFeed');
        container.empty();
        //var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
        var feed = new google.feeds.Feed("http://www.upc.umu.se/om-upc/kalendarium/prenumerera/kalender-rss/?categories=concert,conference,courseEducation,culturOnCampus,dissertation,exhibition,lecture,licentiateSeminar,meeting,theOthers,seminar,seminarSeries,workshop&whoCanAttend=employees&calendarIds=69&fromSiteNodeId=45897");
        feed.setNumEntries(3);
        feed.load(function(result) {
            if (!result.error) {
                var html = '';
                var entryLenght = result.feed.entries.length;
                console.log("Number of posts: " + entryLenght);
                for (var i = 0; i < entryLenght; i++) {
                    console.log("Loop: " + i);
                    var entry = result.feed.entries[i];
                    console.log(entry);
                    var startTime = entry.content.substr(11, 5)
                    var endTime = entry.content.substr(27, 5)
                    html += '<li class="daily">';
                    html += '<h3 class="georgia">' + entry.title + '</h3>';
                    html += '<h4>' + entry.categories[0] + '</h4>';
                    html += '<p>Info: ' + entry.contentSnippet + '</p>';
                    html += '<p><img src="img/watch.png" class="icon" />' + startTime + ' - ' + endTime + '</p>';
                    html += '</li>';
                    container.append(html);
                }
            }
        });
    }
    google.setOnLoadCallback(initialize);
</script>

Answer 1

You are doing a html += "<li></li>" in your loop but you forget to reset this variable inside the loop. So on each iteration, the loop adds this to the container:

• item 1
• item 1, item 2
• item 1, item 2, item 3

End result:

• item 1, item 1, item 2, item 1, item 2, item 3

To fix, reset your html variable to "" at each iteration, e.g.:

for (var i = 0; i < entryLenght; i++) {
    var html = '';
    // rest of your code
}