javascript function returns undefined but console.log() prints the expected value

Question

I'm scraping some data from a webpage using JQuery, but when I try to set the value to a local variable, it becomes undefined. I've searched everywhere on the scope of $.get() method as well as other instances where a variable is undefined when returned but not when printed to the console and I've hit a dead end. Is there something I'm missing? Why can't I point to the variable inside $.get()?

function scrape(url) {

  let imageUrl = "";

  $.get(url, function(response) {
    imageUrl = response.toString().split("<meta property=\"og:image\" content=")[1].split("\"")[1];
    console.log(imageUrl); // THIS PART WORKS AND PRINTS DESIRED URL
  });

  console.log(imageUrl); // this prints nothing...
  return imageUrl; // returns undefined...
}

scrape("https://www.instagram.com/p/BfKjQxcgv-E/");

please take a look at this post : https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — henrily, Feb 14 '18 at 09:04
It's a common issue - in summary, your 2nd console.log runs before the first as the first is asynchronous. Change(or add) your console.logs to `console.log("1")` and `console.log("2")` and you'll see what's going on. — freedomn-m, Feb 14 '18 at 09:06

score 2 · Answer 1 · answered Feb 14 '18 at 09:08

$.get is asynchronous. Thus are you returning the blank imageUrl before the $.get method has returned its response.

This is a shorthand Ajax function, which is equivalent to:
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

To debug this and see how it works you could try:

function scrape(url) {

    let imageUrl = "";

    $.get(url, function(response) {
        imageUrl = response.toString().split("<meta property=\"og:image\" content=")[1].split("\"")[1];
        console.log(imageUrl); // THIS PART WORKS AND PRINTS DESIRED URL
        console.log('Running secondly');
    });
    console.log('Running first');
    console.log(imageUrl); // this prints nothing...
    return imageUrl; // returns undefined...
}

The solution:

Either use $.ajax and configure it like you want, with async set to false. Or you can globally change the ajax setup for jQuery using:

jQuery.ajaxSetup({async:false});

Don't use `async: false`. There's only one situation I can think of where it appropriate. In all other cases you should use the callback pattern properly — Rory McCrossan, Feb 14 '18 at 09:12

score 0 · Answer 2 · answered Feb 14 '18 at 09:06

The ajax call you are doing is async. And the console.log is printed after the response from the $.get(url) is received. the function $.get itself is finished before that. So imageUrl is still empty directly after the $.get has finished

in the function that is part of the $.get you should handle the imageUrl. If you want to change an image in your html you should do it there. You cannot just return the url if you are using async.

javascript function returns undefined but console.log() prints the expected value

2 Answers2