If statement is not executing with JavaScript Closures?

Question

Here is my code

var url = URL;
var imageURL = '';

$.getJSON("https://graph.facebook.com/?id="+encodeURIComponent(url)+"&scrape=true&method=post",
  function (data) {
    json_data = JSON.stringify(data); 
    json_data = json_data.replace(/\s+/g, ' '); 
    var obj = jQuery.parseJSON(json_data);
    imageURL = obj.image[0].url;
    alert(imageURL+'Facebook');

    if(imageURL == ''){
      $.getJSON("//query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url=%27"+encodeURIComponent(url)+"%27%20AND%20xpath=%27descendant-or-self::meta%27&format=json&callback=?"
      , function(data) {
          var res = $.grep(data.query.results.meta, function(image, key) {
          return image.hasOwnProperty("property") && image.property === "og:image"
        });
       if (res.length > 0) {
         var imageURL = res[0].content;
         alert(imageURL+'Pinterest');
      });
    }
});

Now, most of the times it works. But in some cases like any URL from Phandroid. For example, http://phandroid.com/2015/09/25/galaxy-s7-february/

First method can't get obj.image[0].url; because the JSON object does not exist. Since, imageURL was initially a ''. So, the if condition should execute but it does not. I don't get alerts from any block in this case. How, should I proceed?

`$.getJSON` is asynchronous, place `if(imageURL == '')` inside the first call. Also check your `console`, because `parse JSON;` isn't valid JS. — Spencer Wieczorek, Oct 10 '15 at 17:54
@SpencerWieczorek I have made edits to the code. However, it still does not create alerts if Facebook fails. — SanJeet Singh, Oct 10 '15 at 18:13

score 0 · Answer 1 · answered Oct 10 '15 at 17:58

Just try like that :

var url = URL;
var imageURL = '';

$.getJSON("https://graph.facebook.com/?id="+encodeURIComponent(url)+"&scrape=true&method=post",
  function (data) {
    // parse JSON; // <-- you have to correct this
    imageURL = obj.image[0].url;
    alert('Facebook');


    if(imageURL == ''){
      $.getJSON("//query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url=%27"+encodeURIComponent(url)+"%27%20AND%20xpath=%27descendant-or-self::meta%27&format=json&callback=?"
    , function(data) {
        // parse JSON; // <-- you have to correct this
        imageURL = 'set it here.'// <-- you have to correct this
        alert('Yahoo');
      });
    }

  });

I can't still set image URL. I am editing the question to provide more code. — SanJeet Singh, Oct 10 '15 at 18:04

score 0 · Answer 2 · answered Oct 10 '15 at 18:01

I'm not sure how your code was sometimes working, since when you create a request via $.getJSON, it asynchronously fetches that data while the rest of your code runs. A proper fix would be

var url = URL;
var imageURL = '';

$.getJSON("https://graph.facebook.com?id="+encodeURIComponent(url)+"&scrape=true&method=post",
function (data) {
    parse JSON;
    imageURL = obj.image[0].url;
    alert('Facebook');

    // Do your checking of url here
    if(imageURL == ''){
        $.getJSON("//query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url=%27"+encodeURIComponent(url)+"%27%20AND%20xpath=%27descendant-or-self::meta%27&format=json&callback=?"
        , function(data) {
        parse JSON;
        imageURL = set it here.
        alert('Yahoo');
        });
    } else {
        alert('Invalid image url');
    }
});

That way, your Yahoo block runs after the facebook block is complete.

If statement is not executing with JavaScript Closures?

2 Answers2