如何使用$ .ajax解析不同格式的Feed?

时间:2014-03-13 18:25:03

标签: javascript jquery ajax json rss

我正在为this feed plugin添加更多功能。我已经添加了一个选择框,它可以使用data-attribute作为feed url来解析第一个feed(Yahoo Answer)。 (的 Fiddle )。

但是我需要一些关于如何获取更多不同格式的Feed的建议。目前,该插件无法读取第二个选项,因为GoogleNews Feed与Yahoo Knowledge不同。我能找到的唯一参考来自this page作者建议的moving the functionality that displays the feeds in a separate function and use a number of logical OR-s ( || ) throughout the code.

我不确定如何将该方法应用于我的示例,您认为可以执行以下操作:

$('#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(){

然后为每个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>

但我对如何让它发挥作用感到茫然。我希望有人可以给我一些指示。

1 个答案:

答案 0 :(得分:1)

我把你的代码分解成一个内置开关的函数,你应该可以重复使用你想要的任何东西。我根据您的代码完成了“Yahoo”Feed:

 $(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.