Twitch API jQuery help

1

Hi, whenever I try to append the status of freecodecamp, it keeps showing “undefined”. The console log print test as “false”. So I know it’s working, however on the screen, it’s showing as “undefined”. Am I doing something wrong?
It’s showing up like this

   function getFreeCodeCamp() {
        var name = "";
        var pic = "";
        var link = "https://api.twitch.tv/kraken/users/freecodecamp?client_id=epbr8ttvcdj3ox68n97j6q4u20jqyd";


        $.getJSON(link, function (result) {
            var status = getFreeCodeCampStatus();
            name = result.display_name;
            pic = result.logo;
            console.log(name + "\n" + pic);

            $("#userInfo").append(
                "<div class='row userInfoBackground'>"+
                "<span class='col-xs-4 userName'>"+
                name+
                "</span>"+
                "<span class='col-xs-4 title'>"+
                status+
                "</span>"+
                "<span class='col-xs-4'>"+
                "<img class='image' src='" + pic + "'>"+
                "</span>"+
                "</div>"
            );
        });


    }

    function getFreeCodeCampStatus() {
        var test;
        $.getJSON(urlStream, function (result) {
            var status = result.stream;

            if (status === null) {
                
                test = "false";
                console.log(test);
                return test;
            }
            else{
                return result.stream;
            }
        });

    }
2

I think problem is not with var test. your var status is set to undefined
Try this:

function getFreeCodeCampStatus() {
        var test;
        $.getJSON(urlStream, function (result) {
            var status = result.stream;

            if (status){
              return status
            }else{                
                return false;
            }
        });
    }
4

I actually simplified my code but it’s still displaying “undefined”, here my codepen https://codepen.io/angelbenoit/pen/jaoXBq , the cause is coming from the getFollowStatusURL() method. I think it’s the getJSON method inside of it, that is causing some sort of error?

5

Inside the for loop of your getFollowsInfo function, you have the following line:

userStatus[i] = getFollowsStatusURL(userNames[i]);

When you call getFollowsStatusURL, the getJSON function is asynchronous, so since it takes a bit of time for the response to comeback, the assignment takes place immediately. The value of undefined gets assigned to userStatus[i], because there is no value back at the time the function runs Why? Because since inside the getJSON is where you return a value, it is as if you never make the return statement. If a function gets to the end and does not have a return statement, then a default value of undefined gets returned.

OK, now that you know why you are getting undefined, how can you get the information you want and display it? You need to move the assignment of userStatus[i] to be inside the getJSON callback function. Also, you will need to call the placeInfo function after you make the assignment to userStatus[i], because all the data needed to actually display will be ready then.

I was able to switch a few things in your code to make it work like I have described above. I will not give you the solution, but I will give you some pointers/hints (see below) on how to do it.

  1. Inside the for loop, get rid of everything after:
userIcons[i] = followingsObjectArray[i].logo;

and replace with a call to getFollowsStatusURL. Originally, you were calling it with userNames[i]. You could still do this, but then inside getFollowsStatusURL, when you try to reference the i variable, it will be undefined, because it only has scope within getFollowsInfo. Also, you would have trouble calling the placeInfo function as it relies on the correct value of the variable i. So, what value should you pass to getFollowsStatusURL? I have given you a huge hint here.

See if you can solve your problem with the information I have given you. If you get stuck, let us know and we can take a look at your Codepen to see what is going on.

1 Like
6

awesome thanks! got it working now