ajax return value for function

Question

Why doesn't this return a value when the function is called? I've tried it with callbacks, and I can't seem to get it to work either. It lets me console.log, but it just won't return it to the tmp variable.

var URL = "https://api.instagram.com/v1/media/popular?client_id=642176ece1e7445e99244cec26f4de1f";

function getData(){
  var tmp;
    $.ajax({
         type: "GET",
         url: URL,
         dataType: "jsonp",
         success: function(result){
          if(result.meta.code == 200){
            tmp = result.data;
            //console.log(result.data);
          }else{
            alert('fail');
            alert(result.meta.error_message);
          }
         }
    });
    return tmp;
}
console.log(getData()); // undefined?

thanks in advance!

In order to make it work , add prop 'async : false' but i wouldn't recommend it. — DinoMyte, Oct 15 '15 at 23:03
If you set **async: false**, the script will block until the request has been fulfilled. This might affect the user experience in the user interface. — Danny Fardy Jhonston Bermúdez, Oct 15 '15 at 23:07
*DO NOT* add prop `async : false`, it's deprecated for a reason. Learn how to work with asynchronous operations instead — Wesley Smith, Oct 15 '15 at 23:07

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

The ajax method is asynchronous. This means that the calling function will continue without waiting for the ajax call to finish.

This has been explained in more depth, here: How do I return the response from an asynchronous call?

edited May 23 '17 at 12:29

Community

1
1

answered Oct 15 '15 at 23:02

Jordan Glue

279
2
3

score 0 · Answer 2 · answered Oct 15 '15 at 23:08

I recommend you following method of using Ajax in jQuery

"use strict";

var URL = "https://api.instagram.com/v1/media/popular?client_id=642176ece1e7445e99244cec26f4de1f";

$.ajax({
    type: "GET",
    url: URL,
    dataType: "jsonp",
    success: onInstagramSuccess,
    error: onInstagramError
 });

function onInstagramSuccess(result){
    if(result.meta.code == 200){
        console.log(result.data);
    }
}

function onInstagramError(result){
    if(result.meta.code == 404){
        alert('fail');
        alert(result.meta.error_message);
    }
}

Basically Ajax in Javascript is Asynchronous. It's not going to invoke success or fail method until it actually have received a result from the request.

sorry my question is more why is it returning undefined? when it do return instead of console.log ? thanks https://jsbin.com/rotuqoceki/edit?js,console — user3224271, Oct 15 '15 at 23:15

ajax return value for function

2 Answers2