JSON ajax returns undefined

Question

So I've looked through SO and the interwebs for some guiding light but can't find anything that hits the nail on the head.

I'm trying to return a value from a function. The following will present the data in an alert, so I know it's the proper value is coming back from the JSON call:

function getTitle(){
      var q= 'https://www.googleapis.com/youtube/v3/videos?id=[VIDEOID]&key=[APIKEY]&fields=items(snippet(title))&part=snippet'

$.ajax({
      url: q, 
      dataType: "text",
      success: function(data){
          data = JSON.parse(data);
          alert(data.items[0].snippet.title);
      }
  });
}
getTitle();

But when I try to return the data from the function like so:

function getTitle(){
     var q= 'https://www.googleapis.com/youtube/v3/videos?id=[VIDEOID]&key=[APIKEY]&fields=items(snippet(title))&part=snippet'

$.ajax({
      url: q, 
      dataType: "text",
      success: function(data){
          data = JSON.parse(data);
          return data.items[0].snippet.title;
      }
  });
}
alert(getTitle());

I get undefined.

If anyone could tell me where I'm being a bonehead I would appreciate it.

`$.ajax` is an asynchronous call. It will not return the information by the time the alert fires. — Jesse Kernaghan, Nov 11 '15 at 18:29
sorry...the first iteration was dataType: "jsonp". This was one of my subsequent attempts based on googling. so if $.ajax is asynchronous, how would I go about using the returned value? In practice, I'm not alerting the returned value but setting video titles based upon YouTube video id. — GeekInTheBox, Nov 11 '15 at 18:33
Erroneously closed.. you can also make the call synchronous should that be an absolute necessity, however you shouldn't as the page will become unresponsive in the meantime — Elentriel, Nov 11 '15 at 18:36
that can happen by adding async: false to the jquery ajax attributes. However if you resort to that, you have something off with your code and should probably need to revisit it — Elentriel, Nov 11 '15 at 18:39

JstnPwll · Accepted Answer · 2015-11-11T18:36:08.887

6

The function $.ajax is asynchronous. The function getTitle will return immediately as undefined. If you want to do something with the data, put that code inside the success function:

function getTitle(){
     var q= 'https://www.googleapis.com/youtube/v3/videos?id=[VIDEOID]&key=[APIKEY]&fields=items(snippet(title))&part=snippet'

    $.ajax({
        url: q, 
        dataType: "text",
        success: function(data){
            data = JSON.parse(data);
            setTitle(data.items[0].snippet.title);
        }
    });
}
function setTitle(title){
    //do something
}

edited Nov 11 '15 at 18:36

answered Nov 11 '15 at 18:29

JstnPwll

8,585
2
33
56

works like a charm. many thanks! – GeekInTheBox Nov 11 '15 at 18:46

score 0 · Answer 2 · answered Nov 11 '15 at 18:31

$.ajax is asynchronous , use a callback function to get the data.

function getTitle() {
  var q = 'https://www.googleapis.com/youtube/v3/videos?id=[VIDEOID]&key=[APIKEY]&fields=items(snippet(title))&part=snippet'

  $.ajax({
    url: q,
    dataType: "text",
    success: function(data) {
      data = JSON.parse(data);
      success(data);
    }
  });
}

function success(data) {
  alert(data.items[0].snippet.title);
}

JSON ajax returns undefined

2 Answers2