Executing a pair of AJAX calls and combining their results within a single div element

Question

Executing a pair of AJAX calls and combining their results within a single div element

My project entails utilizing two AJAX requests

The first request loads all the streams

The second request retrieves information about online streams

Due to lack of combined data from APIs for both online and offline streams,

I have successfully loaded all streams with names and logos

If a stream is online, I aim to make changes to the stream div (add status, change background color to green)

This is what I attempted

List of streamers:

var streamer = ["Thulz","ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];

A for loop that fetches each streamer, with the first AJAX fetching each streamer's information and placing them in individual divs, while I struggle with the second part

for(i=0;i<streamer.length;i++){
    $.ajax({
    url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i],
    success: function(response) {

    $("#result").append("<div class='row streams'><div class='col-12 imag'><img src='"+response.logo+"' alt='"+response.name+"' height='75' width='75'><div class='texts'>"+response.name+"<p id='"+response.name+"'></p></div></div></div>");          
}});//first AJAX

    $.ajax({//second ajax
    url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i],
    success: function(online) {
        if(online.stream !== null){
            console.log(online.stream.channel.status);
        }
    }//response success
            });

}//streamer for loop

Attempts made:

I assigned unique #id to each streamer and then appended the status and applied CSS changes to the streamers returned by the second request

$("#"+streamer[i]).append(online.stream.channel.status);

or

var sname= online.stream.channel.name;
$("#"+sname).append(online.stream.channel.status);

However, none of these methods worked. Seeking assistance!

javascript jquery html css ajax

Answer 1

Answer №1

Received an answer to my query at this link.

Here is the solution provided:

The issue you're facing relates to handling asynchronous calls with AJAX. While your code requests data from the API and awaits responses, the loop continues without storing the data upon arrival. To resolve this, store the results of your AJAX calls in variables. Once both variables have successfully retrieved their data, take action:
var a = $.ajax({ . . . }); //first AJAX
var b = $.ajax({ . . . }); //second AJAX

$.when(a, b).done(function(channelData, streamData) { . . . });
Using $.when().done() ensures that the loop waits for both variables before proceeding. Place your append() function within this block to check if it resolves the issue. Remember, channelData and streamData represent a and b respectively; you can use different variable names if preferred.

Final version on CodePen: https://codepen.io/Krimlen/pen/rzejdV

Revised JavaScript code:

var streamer = ["Thulz", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];
for(i=0; i<streamer.length; i++){
var firstAjax = $.ajax({
url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i]});//first AJAX
var secondAjax = $.ajax({//second ajax
url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i]
});
$.when(firstAjax, secondAjax).done(function(channel, live) {

$("#result").append(*combine and display data retrieved from both AJAX calls*);

Answer 2

Received an answer to my query at this link.

Here is the solution provided:

The issue you're facing relates to handling asynchronous calls with AJAX. While your code requests data from the API and awaits responses, the loop continues without storing the data upon arrival. To resolve this, store the results of your AJAX calls in variables. Once both variables have successfully retrieved their data, take action:
var a = $.ajax({ . . . }); //first AJAX
var b = $.ajax({ . . . }); //second AJAX

$.when(a, b).done(function(channelData, streamData) { . . . });
Using $.when().done() ensures that the loop waits for both variables before proceeding. Place your append() function within this block to check if it resolves the issue. Remember, channelData and streamData represent a and b respectively; you can use different variable names if preferred.

Final version on CodePen: https://codepen.io/Krimlen/pen/rzejdV

Revised JavaScript code:

var streamer = ["Thulz", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];
for(i=0; i<streamer.length; i++){
var firstAjax = $.ajax({
url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i]});//first AJAX
var secondAjax = $.ajax({//second ajax
url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i]
});
$.when(firstAjax, secondAjax).done(function(channel, live) {

$("#result").append(*combine and display data retrieved from both AJAX calls*);

Executing a pair of AJAX calls and combining their results within a single div element

Answer №1

Similar questions

Creating a dropdown menu that includes miniature images: A step-by-step guide

Interface similar to Amazon that allows users to easily choose product size and color by clicking on the desired options (e.g., clicking on a small red box to select a

How to retrieve specific items from an array contained within an array of objects using Express.js and MongoDB

Styling for Print Media: Adjusting the horizontal spacing between inline elements

Meteor JS failed to load the CSS file due to an unsupported MIME type

Failure of Highchart's resizing mechanism when hidden

Instead of using a hardcoded value, opt for event.target.name when updating the state in a nested array

The modal div remains hidden when embedded inside a PHP file

"Learn the process of customizing the border color of a drop-down menu using

Accessing PHP output within Jquery

Switch up the display and concealment of div elements with the power of

Notification indicating that an object has been identified

Tips for properly structuring the ajax POST request for basecamp

Angular 13's APP_INITIALIZER doesn't wait as expected

Removing a specific element from a JSON array by its ID

Getting JSON data from an ASP.NET C# server and returning it in a success function

Creating a jQuery countdown script

Instead of broadcasting your message to the channel, try sending it directly to the user

Proper method for adding elements in d3.js

After clicking, revert back to the starting position