I’m trying to figure out how to add a variable that stores data.stream.game and for channels that are online, display it on the table. However, whenever I add a variable below the success function, I only get the channels that are online. Here’s my codepen:
The data from the ajax call will only be available inside the context of the callback function defined in the
success parameter. If you want to work with the game name data, you would have to do your work with it either inside of the success callback, or pass it along to another function.
Now, the issue with this bit of code (which I realize you have commented out, but still):
$('#game').append(dataI.stream.game + '<br>');
is of course that you’ll have different “game” cells for each stream, and so your jQuery selector #game isn’t actually going to target the cell you want.
When I did this project originally myself I had this method of doing this:
- Create the table for my data. Name each cell dynamically, such that the cell ids looked like this:
'<td id="' + username + '-game"></td>'
- Once the ajax call was complete, update the text inside the cells.
$('#' + username + '-game').text(dataI.stream.game);
However, I think I have a much better solutions now. I played with your CodePen and changed line 64 of your code to read as follows:
'<td><span class="online">' + (dataI.stream.game || 'N/A') + '</span></td>');
I think that gets the effect that you are after.