jQuery use variable outside function

Question

I'm using jquery.feeds.js to aggregate rss feeds and preprocessing the data received with jsonp.js. The problem is I can't use the variable summarize I've set within the preprocess function outside of it. I did set it as a universal variable though so I don't know what I could be doing wrong. Could it be a problem that I'm running multiple JSON requests?

My code:

$('#feed').feeds({
    feeds: {
        reuters: 'http://feeds.reuters.com/reuters/businessNews'
    },
    max: 2,
    preprocess: function ( feed ) {
        var articleLink = (this.link);
        var summarize = '';

        $.getJSON({
            url: 'https://jsonp.nodejitsu.com/?url=http://clipped.me/algorithm/clippedapi.php?url='+articleLink+'&callback=?',
            corsSupport: true, 
            jsonpSupport: true,

            success: function(data){
              var summarize = data.summary
            }
          });

          alert(summarize);

        this.contentSnippet = summarize

    },
    entryTemplate: '<h3><!=title!></h3><p><!=contentSnippet!></p><i><!=link!></i>'
});

And a JSFIDDLE

I'm changing the value of 'this.contentSnippet' to the value of 'summarize' — babusi, Nov 20 '14 at 23:14
No you aren't, because that's happening before the __asynchronous__ `getJSON` finishes. — Evan Davis, Nov 20 '14 at 23:14
This should be re-opened as the issue is not really the ajax result. It seems as it is because it is being used wrongly but the real problem is with the feeds plugin. — Gabriele Petrioli, Nov 20 '14 at 23:51

score 1 · Answer 1 · answered Nov 20 '14 at 23:17

I think you mean this

$('#feed').feeds({
    feeds: {
        reuters: 'http://feeds.reuters.com/reuters/businessNews'
    },
    max: 2,
    preprocess: function ( feed ) {
        var articleLink = (this.link);
        var summarize = '';

        var that = this;

        $.getJSON({
            url: 'https://jsonp.nodejitsu.com/?url=http://clipped.me/algorithm/clippedapi.php?url='+articleLink+'&callback=?',
            corsSupport: true,
            jsonpSupport: true,

            success: function(data){
                that.contentSnippet = data.summary
            }
        });

    },
    entryTemplate: '<h3><!=title!></h3><p><!=contentSnippet!></p><i><!=link!></i>'
});

score 1 · Accepted Answer · answered Nov 20 '14 at 23:52

You have a series of errors that are not addressed in the other posts..

the preprocess callback allows for changes in the current object (feed) right before it gets displayed.
Since the getJSON is an ajax call it will get the results too late. And changing the contentSnippet even in the success callback will not fix this.
You use the $.getJSON method as if it was $.ajax. So you pass it wrong arguments. Just use $.ajax for your syntax
finally to fix the first issue, you need to alter your template a bit so you can find the relevant parts later on (when the ajax requests complete) and use the onComplete callback instead (of the feeds plugin)

All changes together give

$('#feed').feeds({
    feeds: {
        reuters: 'http://feeds.reuters.com/reuters/businessNews'
    },
    max: 2,
    onComplete: function(entries){ // use onComplete which runs after the normal feed is displayed
        var $this = $(this);
        entries.forEach(function(entry){
            var $self = $this.find('.entry[data-link="'+entry.link+'"]');

            $.ajax({
                url:'https://jsonp.nodejitsu.com/?url=http://clipped.me/algorithm/clippedapi.php?url='+entry.link,
                corsSupport: true, 
                jsonpSupport: true,     
                success: function(data){
                    // add the results to the rendered page
                    $self.find('.snippet').html( data.summary );
                }
              });
        });   
    }, // change the template for easier access through jquery
    entryTemplate: '<div class="entry" data-link="<!=link!>"><h3><!=title!></h3><p class="snippet"><!=contentSnippet!></p><i><!=link!></i></div>'
});

Demo at http://jsfiddle.net/gaby/pc7s2bmr/1/

Thank you so much for taking the time to research your answer. I really appreciate it. This works perfectly — babusi, Nov 21 '14 at 00:00

Christopher White · Answer 3 · 2014-11-20T23:22:51.060

-1

Mathletics is correct. Do this...

$('#feed').feeds({
    feeds: {
        reuters: 'http://feeds.reuters.com/reuters/businessNews'
    },
    max: 2,
    preprocess: function ( feed ) {
        var articleLink = (this.link);
        var summarize = '';
      var _this = this;

        $.getJSON({
            url: 'https://jsonp.nodejitsu.com/?url=http://clipped.me/algorithm/clippedapi.php?url='+articleLink+'&callback=?',
            corsSupport: true, 
            jsonpSupport: true,

            success: function(data){
               _this.contentSnippet = data.summary
            }
          });

          alert(summarize);
    },
    entryTemplate: '<h3><!=title!></h3><p><!=contentSnippet!></p><i><!=link!></i>'
});

edited Nov 20 '14 at 23:22

answered Nov 20 '14 at 23:17

Christopher White

298
1
8

I just tried it having edited '$this' to 'this' and it didn't work – babusi Nov 20 '14 at 23:21
Sorry, I didn't mean to add the $. Corrected the post. – Christopher White Nov 20 '14 at 23:23

jQuery use variable outside function

3 Answers3