2

I am having a function which is taking user id and calling the FB graph API for cover image, the API call is correct I am getting the cover image url but that url is not getting stored in var timlineimagepath. I had tried every possible scope for that variable

var timelineimgpath;

function getFBTimelineImgPath(userid) {
    var URL = 'https://graph.facebook.com/' + userid + '?fields=cover';
    var path = $.ajax({
        url: URL,
        type: "GET",
        dataType: "jsonp",
        success: function (parsed_json) {
            return (timelineimgpath = parsed_json["cover"]["source"]);
        }
    }
});

I am calling this function from another function but there the timelineimgpath is coming UNDEFINED.

Stéphane Bruckert
  • 21,706
  • 14
  • 92
  • 130
Amit Singh
  • 344
  • 3
  • 18
  • try putting console.log(parsed_json) in success: and see what response comes. Try to nanlyze its structure. Can you give us the returned JSON response string ? – Rahul Gupta Jun 13 '14 at 09:39
  • this timelineimagepath at the point of return contains the url of cover I had checked it with alert statement .but outside when i am using it it's just undefine what into it. and i alsi treid stroing the content into var Path but what i got i a object i don;t know hwta to do with that – Amit Singh Jun 13 '14 at 09:44
  • instead of alert(parsed_json) try using console.log(parsed_json) and check the 'console' tab of firebug. It will show up the structure of the returned JSON response – Rahul Gupta Jun 13 '14 at 09:50

1 Answers1

1

Your are facing the same problem as on:

In fact, you won't be able to return anything from an Ajax function because Ajax is asynchronous. Think that every Ajax call takes time and that the next statements don't wait for the Ajax call to finish.

1st solution: using a promise

var timelineimgpath;

function getCover(userid) {
    return $.ajax({
        url: 'https://graph.facebook.com/' + userid + '?fields=cover',
    });
}

getCover("19292868552").done(function (data) {
    /** You have to do everything you need with your data HERE */
    timelineimgpath = data.cover.source;
    alert(timelineimgpath); // <-- this is called after
});

/** 
 * You see that the data is not available 
 * The Facebook API query has not occured yet!
 */
alert(timelineimgpath); // <-- "undefined"

JsFiddle

2nd solution: using a callback

function getCover(callback, userid) {
    $.ajax({
        url: 'https://graph.facebook.com/' + userid + '?fields=cover',
        success: callback
    });
}

function doWithCover(data) {
    /** You have to do everything you need with your data HERE */
    alert(data.cover.source);
}

getCover(doWithCover, '19292868552');

JsFiddle

Community
  • 1
  • 1
Stéphane Bruckert
  • 21,706
  • 14
  • 92
  • 130
  • Same problem data.cover.source contains the cover url but the function from where I am using var timelineimgpath=getgetFBTimelineImgPath('USER_ID'); s – Amit Singh Jun 13 '14 at 10:01
  • I updated the code since. Can you make sure you have the following in your code: `return $.ajax` ? – Stéphane Bruckert Jun 13 '14 at 10:04
  • Ya I had tried the updated code also, now the timelineimgpath var contains the entire object – Amit Singh Jun 13 '14 at 10:12
  • timelineimgpath:object { readyState=1, setRequestHeader=function(), getAllResponseHeaders=function(), more...} readyState 1 abort function() always function() complete function() done function() error function() fail function() getAllResponseHeaders function() getResponseHeader function() isRejected function() isResolved function() overrideMimeType function() pipe function() progress function() promise function() setRequestHeader function() state function() statusCode function() success function() then function() – Amit Singh Jun 13 '14 at 10:27
  • On expanding more the inner content is function this is same to what when i was trying to store the content into var path. – Amit Singh Jun 13 '14 at 10:28
  • Ok, I've got it to work and I updated my answer. You can try now. – Stéphane Bruckert Jun 13 '14 at 13:48