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

When the Angular script is executed, the variable is not defined

Issue with merging JSON in Angular using RxJS

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

Creating routes in Node.js after setting up middleware

Issues with tracking changes in Vue.js when using reactive variables

Utilizing *ngfor in Angular 7 to Group and Display Data

Identifying Touch Interaction exclusively on WebGL Canvas within threejs

Using jQuery Ajax to Send Values Between Functions and Replace Nulls

What sets apart "import { pick } from 'lodash';" from "import pick from 'lodash/pick';"?

The VUE project I'm working on seems to be having compatibility issues with the Bootstrap modal in V

Tips for incorporating images into an `.mdx` file located outside of the `public/` directory with the `next-mdx-remote` package in Next JS

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

Is it advisable to incorporate await within Promise.all?

Encountered an error while trying to create module kendo.directives using JSPM

Exploring AngularJS Navigation in Windows 8 App Store Applications

Async function captures error being thrown

Switching from Vanilla JS to Vue.js, dealing with querySelector problems

Utilizing Vue CLI's sourcemaps to pinpoint the styling within a Vue component file

Learn how to efficiently pass multiple props using a loop in Vue

How can I stop and hover over time in AngularJs Interval?