Utilizing a callback function to update the value of a variable that is declared outside of the getJSON function

Question

Utilizing a callback function to update the value of a variable that is declared outside of the getJSON function

I'm currently facing an issue with this function I have.

function customCheck(username){
    var result = "normal";  
    $.getJSON('https://api.twitch.tv/kraken/streams/' + username, function(data){
      if(data.stream == null)
        result = 'offline';
      else 
        result = 'online';

    }).fail(function(){
        result = 'notfound';
       });

   return result;
}

console.log(customCheck('streamer123'));

The problem lies in the fact that when I check the console log, it always displays "default" instead of "offline", "online", or "notfound" as expected.

I've attempted to rearrange the code by moving the console.log() line before the customCheck() function, but unfortunately, it didn't solve the issue. Also, trying to define the variable result globally did not resolve the problem either.

If anyone has any suggestions or solutions, please feel free to share them!

javascript getjson

Answer 1

Answer №1

Here is an example of how your code should be structured:

function verifyUser(username, callback){
    var result = "default";  
    $.getJSON('https://api.twitch.tv/kraken/streams/' + username, function(data){
      if(data.stream == null) {
        result = 'offline';
      } else {
        result = 'online';
      }

      callback(result);
    }).fail(function(){
        result = 'notfound';
        callback(result);
    });
}

verifyUser('freecodecamp', function (result) {
    console.log(result);
});

The reason for this structure is that $.getJSON operates asynchronously, meaning it returns immediately and provides its output value through a callback function.

In order to access the final result, you will need to utilize a similar approach by implementing a callback within your own function that executes when the $.getJSON function invokes its internal callback.

Answer 2

Here is an example of how your code should be structured:

function verifyUser(username, callback){
    var result = "default";  
    $.getJSON('https://api.twitch.tv/kraken/streams/' + username, function(data){
      if(data.stream == null) {
        result = 'offline';
      } else {
        result = 'online';
      }

      callback(result);
    }).fail(function(){
        result = 'notfound';
        callback(result);
    });
}

verifyUser('freecodecamp', function (result) {
    console.log(result);
});

The reason for this structure is that $.getJSON operates asynchronously, meaning it returns immediately and provides its output value through a callback function.

In order to access the final result, you will need to utilize a similar approach by implementing a callback within your own function that executes when the $.getJSON function invokes its internal callback.

Utilizing a callback function to update the value of a variable that is declared outside of the getJSON function

Answer №1

Similar questions

Generate HTML elements within an AngularJS directive and establish a click event

What impact does adding 'ng' in unit tests have on how promises are handled?

What is the best way to combine API calls using rxJs subscribe and map in Angular?

Having difficulty accessing a public array item within chained AXIO transactions in VUE

The attempt to add a note with a POST request to the /api/notes/addnote endpoint resulted in a

"Is there a way to extract a value from a JSON object using

Input information into a JSON container

The conversion of Draft-js JSON to EditorState is not functioning correctly

Using AngularJS Typeahead with restrictions on $http requests

Customize the behavior of jQuery cycle with an <a> tag

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Responsive menu is failing to respond to the click event

What is causing the issue with Vue.js :class not functioning properly when it relies on a property of a list

The URL is being modified, yet the page remains static in the React application

Using Object Value as Variable instead of String in JavaScript/React

How can Angular incorporate JSON array values into the current scope?

The contrastText property of the MUI React Theme palette is not functioning properly

Interactive search functionality using jQuery

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

React-Native introduces a new container powered by VirtualizedList