Question

I have this code in PHP:

<?php

$data = file_get_contents('http://newsrss.bbc.co.uk/rss/sportonline_uk_edition/football/rss.xml');

$xml = simplexml_load_string($data);

echo json_encode($xml);

?>

And this jQuery:

setInterval(function() {

$.getJSON('bbc.php', function(data) {
    console.log(data);
    $.each(data.channel.item, function(index, item){
        $('.container').append("<p data-date='" + item.pubDate + "'>" + item.title + "</p>");
    });
});

}, 5000);

So, as you can see, its going to append the same dataset below the previous one creating many duplicated entries. What would be the best approach here, using client or server side, to only send back/display new data, rather than outputting the same data again?

Answer 1

Client side solution:

You can keep global JavaScript array of all rss items. When new item is coming – you check if it’s present in that array, then appent it to the container.

var myRSS =[];

function rssReader() {

    $.getJSON('bbc.php', function(data){
        $.each(data.channel.item, function(index, item){
            // check if item title is stored in the array   
            if (jQuery.inArray(item.title, myRSS)) { 
                //do nothing
            } else {
                // save item title in the array
                myRSS.push(item.title);

                // publish item  
                $('.container').append("<p data-date='" + item.pubDate + "'>" + item.title + "</p>");
            }
        });
    });

}

setInterval(rssReader(), 5000);