How to use $.ajax to parse feeds in different formats?

Question

I'm working on adding more functions to this feed plugin. I've added a select box to it and it's able to parse the first feed (Yahoo Answer) by using a data-attribute as the feed url. (Fiddle).

But I need some advice on how to make it fetch more feeds that come in different formats. Right now, the plugin can't read the second option because GoogleNews feed is different from Yahoo Knowledge. The only reference I can find is from this page where the author suggests moving the functionality that displays the feeds in a separate function and use a number of logical OR-s ( || ) throughout the code.

I'm not really sure how to apply that method to my example, do you think it's possible to do something like:

$('#feed_select').bind('change', function () {

   var feedurl = $(this).val(); // get selected value
   var selected = $(this).find('option:selected');
   var feedformat =selected.data('format')
   var area = $("#rss-items");
   area.removeClass().empty();

$.ajax({
    url: feedurl,
    success: function (data) {

    // use logical OR-s

$.each(data.query.results.Question || data.responseData.feed.entries,function(){

and then create a seperate function for each feed?

function (Question) //YahooKnowledge
{
    return $('<ul>').html(
        formatString('<li><a target="_blank" href="' + Question.Link + '">' + Question.Subject + '</a></li>';
    );
}

function (entry) //GoogleNews
{
    return $('<ul>').html(
        formatString('<li><a target="_blank" href="' + entry.link + '">' + entry.title + '</a></li>';
    );
}

HTML:

<select id="feed_select">
    <option value="">Select</option>
    <option data-format="Yahoo" data-class="red" value="url">Yahoo Knowledge</option>
    <option data-format="Google" data-class="blue" value="url">Google News</option>

</select>


<div id="rssdata">
<ul id="rss-items"></ul>
 <div id="loadingrss">Loading RSS items...</div></div>

But I'm at a loss on how to get that to work. I hope someone can give me some directions.

Answer 1

I took your code and broke it out into a function with a switch inside that you should be able to reuse for whatever feeds you'd like. I've done the 'Yahoo' feed based off of your code:

 $(function(){
    $('#feed_select').bind('change', function () {

        var feedurl = $(this).val(); // get selected value

        var selected = $(this).find('option:selected');

        var feedformat =selected.data('format');

        var area = $("#rss-items");

        area.removeClass().empty();

        $.ajax({
            url: feedurl,
            dataType: 'json',
            success: function (data) {

                var feedclass = selected.data('class');
                var loading =$("#loadingrss");

                // send the data to a functino to handle it
                item_html = parseData(feedformat, data)

                area.append(item_html).addClass(feedclass).slideDown();
                area.slideDown();
                loading.fadeOut();
            },
            error: function () { console.log('fail'); }
        });
    });
});

function parseData(type, data) {

    var item_html = '';

    switch(type) {
        case 'Yahoo':
            $(data.query.results.Question).each(function (index, Question) {
                item_html += '<li><a target="_blank" href="' + Question.Link + '">' + Question.Subject + '</a></li>';
            });
            break;
        case 'Google':
            // code to make you li for this feed
            break;
    }
    return item_html;
}

Fiddle.