How would I go about placing the logo of each channel in each row? I’ve tried several methods, but to no avail. I would like to have the logo underneath the logo head, but can’t find a way of doing it.
Hi, looking at your code, I wouldn’t use table elements - they’re a little passe. Bootstrap is a more modern option and is part of the FCC curriculum. I see that you tried them - I guess they didn’t work. This is an example:
<div class="container">
<div class="row">
<div class="col-sm-12">
Title Title Title Title Title Title Title Title Title Title Title
</div>
</div>
<div class="row">
<div class="col-sm-3">channel 1</div>
<div class="col-sm-3">status 1</div>
<div class="col-sm-3">game 1</div>
<div class="col-sm-3">logo 1</div>
</div>
<div class="row">
<div class="col-sm-3">channel 2</div>
<div class="col-sm-3">status 2</div>
<div class="col-sm-3">game 2</div>
<div class="col-sm-3">logo 2</div>
</div>
<div class="row">
<div class="col-sm-3">channel 3</div>
<div class="col-sm-3">status 3</div>
<div class="col-sm-3">game 3</div>
<div class="col-sm-3">logo 3</div>
</div>
</div>
Of course, you have have jQuery dynamically create those rows. But for the logo, you would replace it with an img tag to link to the image. Make sure that bootstrap is loaded in your codepen settings.
Hey. Make a reference of the channel (by its name for example, because it’s unique anyway) when you create the table the first time for both the offline and online channels.
Then, create a function that execute the Ajax you are using to get the logos (you don’t need to wrap it in a for loop again and you’ll see why) that will use the reference class you created earlier:
function getLogo(name) {
$.ajax({
type:'GET',
url:'https://api.twitch.tv/kraken/channels/'+ name,
headers:{
'client-ID': 'your_id'
},
success: function(d2){
var logo = d2.logo || 'http://jesusldn.com/wp-content/forum/uploads/2015/06/noimage.png';
$('#myTable tr[class='+d2.name+']').append('<td><img src="'+logo+'" height="100" ></td>')
}
})
}
Call this function at the beginning of your second Ajax call’s success state (you won’t need the other for loop because you are calling the function from a for loop anyway):
success: function(dataI) {
var name = dataI._links.self.slice(37);
getLogo(name);
and everything should work as intended. You can see it working here. You can learn more about the attribute selectors here.
Thanks for the advice. One questions. How does the getLoop function from the success function iterate through if its scope is outside of the third ajax request?
It’s only defined outside the scope. You’re calling it inside the success state of the second Ajax request therefore it will run only when that request it’s successful. Each time your second Ajax function runs (and it’s successful) it will execute that function passing it the name of each channel.
Why not? This is a perfect use case for a table. Tables are only “passé” for data they’re not suited to (e.g. overall page layout or data that is unrelated).
Perhaps. That’s just what I’ve been told, that add-on grid systems are superior to table elements. But on looking deeper, I see a lot of people framing it the way you do. I’ll have to keep that in mind and do some more reading. Thanks
If you open Chrome Dev Tools, you’ll see something like this as a result:
I then use an attribute selector (tr[class='+d2.name+']) to target the <tr> that has the class name equal to the value of d2.name, which is a property of the object returned by the last ajax call (the one in the getLogo function).
Yes, that is the purpose of CSS to be applied to HTML. You can do it by element, by id, or by class. That is the subject of a few of the learning problems, like this one: