JavaScript asynchronism

Question

JavaScript asynchronism

Navigation

#1 by (0 votes)

0

I have a problem with my code. It does not run in order, making a getJSON request takes a bit.

 $(document).ready(function(){
  var channels = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas'];
  getChannelsNames();

  function getChannelsNames(){
    var myHtml = '', status = 'Offline';

    channels.forEach(function(channel, callback){
      $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel, function(json){
        status = onlineStatus(json);
        myHtml += infoChannels(channel, status);
      }).fail(function(){
        console.log('Error');
        myHtml += infoChannels(channel, status);
      });
    });
    $('.channels').html(myHtml);
  }

  function onlineStatus(json){
    if(json.stream){
      return json.stream.game;
    } else {
      return 'Offline';
    }
  }

  function infoChannels(channel, status){
    return "<div class='row'><div class='col-12 col-md-4 bg-info'>" + channel + "</div><div class='col-12 col-md-8 bg-primary text-center'>" + status + "</div></div>";
  }
});

In this part $('.channels').html(myHtml); does not do what it should do because the variable myHtml would have to contain something that should be assigned inside getJSON .

javascript asincronismo

asked by Daniel Sandoval 20.02.2018 в 06:30

source

1 answer

How to change a Bipmap variable to String Base64 with Android Studio How to save the ID of an insertion in BD in another table in PHP?

score 0 · Accepted Answer

As it is within forEach the request $ .getJson it would be correct to add html when get the success (done) of the request, if not the variable is possibly empty or does not contain all the data. In addition we do not set the HTML directly but we insert content to what already exists with append ()

 $(document).ready(function(){
  var channels = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas'];
  getChannelsNames();

  function getChannelsNames(){
    var myHtml = '', status = 'Offline';

    channels.forEach(function(channel, callback){
      var jqxhr = $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel, function(){
        
        }).done(function(json) {
          myHtml = ''; //seteamos el html a añadir
          status = onlineStatus(json);
          myHtml += infoChannels(channel, status);
          $('.channels').append(myHtml);//añadimos al div con clase channels
        })
      .fail(function(){
        console.log('Error');
        myHtml += infoChannels(channel, status);
      });
    });
    
  }

  function onlineStatus(json){
    if(json.stream){
      return json.stream.game;
    } else {
      return 'Offline';
    }
  }

  function infoChannels(channel, status){
    return "<div class='row'><div class='col-12 col-md-4 bg-info'>" + channel + "</div><div class='col-12 col-md-8 bg-primary text-center'>" + status + "</div></div>";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
<div class="channels">
  
</div>