Fun with YQL & jQuery.GetJSON

by deanpeters

HTML

<h3>Deprecated</h3>

<p>The work in this jsfiddle has been superceded by a jQuery plugin called NewsFeeds.SectionPopulate</p>
<p>You can still run this jsfiddle, or you can visit the plug-in at <a href="http://jsfiddle.net/deanpeters/By3NM/">http://jsfiddle.net/deanpeters/By3NM/</a>.</p>

<h4>Fun with YQL and jQuery.getJSON()</h4>
<h5>Stories List</h5>
<ul id="my-stories">
</ul><!-- /#my-stories" -->

<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-442503-9']);
    _gaq.push(['_setDomainName', 'deanpeters.com']);
    _gaq.push(['_setCampNameKey', 'jsfiddle']);    
    _gaq.push(['_setCampMediumKey', navigator.userAgent ]);
    _gaq.push(['_setCampSourceKey', 'internet']);   
    _gaq.push(['_setCampTermKey', 'javascript']);       
    _gaq.push(['_setCampContentKey', document.title ]);
    _gaq.push(['_trackPageview']);

     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    
</script>

JavaScript

/* make sure the callback=?*/

/*
jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
urlA string containing the URL to which the request is sent.
dataA map or string that is sent to the server with the request.
success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.
*/

var publishStories = function(items) {
    console.log("publishStories->items:", items);

    var _ul = $('#my-stories').clone();
    $.each(items.item, function(i, item) {

        /* create the text link first */
        var _href = $('<div />').append(
        $('<a/>', {
            href: item.link,
            text: item.title,
            title: item.title
        }));

        /* if an image exists, clone the text link, replacing text w/image */            
        var _img = $('<div />');
        if (item.content && item.content.url) {
            var _imgObj =
            _img = _href.clone();
            _img.children('a').html(
            $('<img/>', {
                src: item.content.url,
                height: (item.content.height * 1.5),
                width: (item.content.url * 1.5),
                alt: item.title
            }));
        }


        var _li = $('<li />').append(_href).append(_img);
        _ul.append(_li);
    });
    $('#my-stories').replaceWith(_ul);
}

var getStories = function(rssCategory) {
    
    
 var yqlURL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%20in%20(%0A%20%20%20%20'http%3A%2F%2Fnews.yahoo.com%2Frss%2F" + rssCategory + "'%0A)%20%20and%20content.type%20%3D%20'image%2Fjpeg'%20%7C%20sort(field%3D%22date%22%2C%20descending%3D%22true%22)%20%20%7C%20unique(field%3D%22guid%22)%20&format=json&diagnostics=true&callback=?";   
    console.log(yqlURL);
    
        var jqxhr = $.getJSON(yqlURL, function(data, status) {
            console.log("success1:", status, data);
            publishStories(data.query.results);
            saveJSON("section-" +...