What could be the reason for the malfunction of my for loop within my JSON operation?

Question

What could be the reason for the malfunction of my for loop within my JSON operation?

Hi everyone, I'm new to coding and currently working on a project involving Twitch Viewer on FreeCodeCamp.

I've managed to extract information from the JSON file and display it in my HTML code. However, I'm encountering an issue where I am unable to retrieve the names from my "gamer" array.

I'm puzzled why the for loop is not functioning within the json function. Any insights on this would be greatly appreciated!

Thank you in advance for your assistance!

var gamer = ["OgamingSC2","ESL_SC2"];

for(i=0;i<(2);i++){
  
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[i]+'/?callback=?', function(json) {
  $('.list').append("<b>Name: " + gamer[i] + "</b><br>");
  var logo = json.stream.channel.logo;
  
  $('.list').append("Game: " + json.stream.channel.game + "<br>");
  $('.list').append("Status: " + json.stream.channel.status + "<br>");
  $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
  console.log(json);
});}

img {
  width: 5em;
  border-radius: 10px;
}

<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

javascript json loops for-loop

Answer 1

Answer №1

When using $.getJson, it is important to remember that it is an asynchronous call. This means that it will only execute after all synchronous operations have been completed. As a result, the for loop runs twice and adds two getJSON callback functions to the function stack.

Due to JavaScript's lexical or functional scope, the variable i persists in the global scope as 2 (as the final i++ has also been executed).

Subsequently, the callback functions are executed one by one from the function stack. However, since the value of i is now 2, the callback functions will only reference gamer[2] which does not exist, resulting in an undefined error.

If you were to add a console.log(i) within your $.getJSON, you would observe that it outputs 2 twice.

Consider trying the following approach:

var gamer = ["OgamingSC2", "ESL_SC2"];
gamer.map(function(gamer) {
 loopIt(gamer);
});

function loopIt(gamer) {

 $.getJSON('https://api.twitch.tv/kraken/streams/' + gamer + '/?callback=?', function(json) {
   $('.list').append("<b>Name: " + gamer + "</b><br>");
   var logo = json.stream.channel.logo;

   $('.list').append("Game: " + json.stream.channel.game + "<br>");
   $('.list').append("Status: " + json.stream.channel.status + "<br>");
   $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
 });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

Answer 2

When using $.getJson, it is important to remember that it is an asynchronous call. This means that it will only execute after all synchronous operations have been completed. As a result, the for loop runs twice and adds two getJSON callback functions to the function stack.

Due to JavaScript's lexical or functional scope, the variable i persists in the global scope as 2 (as the final i++ has also been executed).

Subsequently, the callback functions are executed one by one from the function stack. However, since the value of i is now 2, the callback functions will only reference gamer[2] which does not exist, resulting in an undefined error.

If you were to add a console.log(i) within your $.getJSON, you would observe that it outputs 2 twice.

Consider trying the following approach:

var gamer = ["OgamingSC2", "ESL_SC2"];
gamer.map(function(gamer) {
 loopIt(gamer);
});

function loopIt(gamer) {

 $.getJSON('https://api.twitch.tv/kraken/streams/' + gamer + '/?callback=?', function(json) {
   $('.list').append("<b>Name: " + gamer + "</b><br>");
   var logo = json.stream.channel.logo;

   $('.list').append("Game: " + json.stream.channel.game + "<br>");
   $('.list').append("Status: " + json.stream.channel.status + "<br>");
   $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
 });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

Answer 3

Answer №2

It seems like the issue is with the JSON response not being displayed because of the callback=? parameter. When you include a ? in the callback variable, it interprets it as part of the value and doesn't return anything. To fix this, simply use callback= without any additional values. Then, try alerting the JSON variable in the function to see if the value is returned properly. There doesn't appear to be any issues with the loop or the JSON link.

Answer 4

It seems like the issue is with the JSON response not being displayed because of the callback=? parameter. When you include a ? in the callback variable, it interprets it as part of the value and doesn't return anything. To fix this, simply use callback= without any additional values. Then, try alerting the JSON variable in the function to see if the value is returned properly. There doesn't appear to be any issues with the loop or the JSON link.

Answer 5

Answer №3

When dealing with server calls in a loop like this, it's advisable to utilize a custom loop mechanism.

Here is an example: https://jsfiddle.net/9fwGdk3L/

    var players = ["Ninja","Shroud"];

     var counter = 0;
     fetchData()

     function fetchData(){
        $.getJSON('https://api.twitch.tv/kraken/streams/'+players[counter]+'/?callback=?', function(data) {
    $('.list').append("<b>Username: " + players[counter] + "</b><br>");
    var avatar = data.stream.channel.logo;

     $('.list').append("Game: " + data.stream.channel.game + "<br>");
     $('.list').append("Status: " + data.stream.channel.status + "<br>');
     $('.list').append("Avatar: " + "<img src=" + avatar + ">" + "<br><br><br>');
      console.log(data);
      counter++
      if(counter < players.length){

        fetchData();
     }

});
}

Answer 6

When dealing with server calls in a loop like this, it's advisable to utilize a custom loop mechanism.

Here is an example: https://jsfiddle.net/9fwGdk3L/

    var players = ["Ninja","Shroud"];

     var counter = 0;
     fetchData()

     function fetchData(){
        $.getJSON('https://api.twitch.tv/kraken/streams/'+players[counter]+'/?callback=?', function(data) {
    $('.list').append("<b>Username: " + players[counter] + "</b><br>");
    var avatar = data.stream.channel.logo;

     $('.list').append("Game: " + data.stream.channel.game + "<br>");
     $('.list').append("Status: " + data.stream.channel.status + "<br>');
     $('.list').append("Avatar: " + "<img src=" + avatar + ">" + "<br><br><br>');
      console.log(data);
      counter++
      if(counter < players.length){

        fetchData();
     }

});
}

What could be the reason for the malfunction of my for loop within my JSON operation?

Answer №1

Answer №2

Answer №3

Similar questions

I am looking to consolidate my array of objects into a single object with distinct keys

Twice the fetch is triggered

safely sending different form inputs in a Ruby on Rails form

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

Discovering the initial word of a string using jQuery

Issue with JQueryUI Dialog auto width not accounting for vertical scrollbar

What is the best way to measure the loading time of a "Loading Screen" page using Jmeter and Selenium?

jqGrid doesn't refresh after making an AJAX request

The drop-down menu appears to be falling behind the 'content' div element

JavaScript code for displaying data sequentially one at a time

`Is my JSON contact list missing after running `npm build` in React?`

New data received in Akka-Http was processed by converting it to a JSON object

Extract PHP variable and incorporate it into JavaScript code

Enable automatic profile login for the Firebase application

Issue with Ajax reload functions malfunctioning

Fixing Laravel 5.2 and jQuery validation issue: Accessing a property from a Non-Object

Troubleshooting overlap problem between Skrollr and SlickNav

Guide to accessing and showcasing an embedded Firestore entity using Angular?

Efficiently Populating Arrays Without Blocking

Python KeyError: When Attempting to Retrieve JSON Data With an Index of 0