Placing Logo in each Row

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.

Here’s my codepen: https://codepen.io/baquino1994/pen/EvLrPV?editors=1011

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.

Let me know if any of this isn’t clear.

1 Like

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.

Basically change this:

$('#myTable').append('<tr>'+

to this:

$('#myTable').append('<tr class="'+name.toLowerCase()+'">'+

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.

Also, I would follow @ksjazzguitar advice!

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?

Thank you. I’ll keep that in mind for future projects.

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.

Is the success function considered in the global scope?

I got it never mind.

1 Like

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

Sorry for asking a lot of questions, but what do you mean by reference class? I don’t understand how you can add it.

No need to apologies! I meant a class that you can use to identify the channel and then use later to add the logo to the correct channel.

This is the line where I add the name that you already created from the URL of the channel as a class for each <tr> in the table:

$('#myTable').append('<tr class="'+name.toLowerCase()+'">'

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).

$('#myTable tr[class='+d2.name+']').append('<td><img src="'+logo+'" height="100" ></td>')

So I can make a class in javascript for html? Thank you again got the responses

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:

1 Like