More appending mess with jQuery

More appending mess with jQuery
0.0 0

#1

Hi everyone,

working on my twitch tv project. I want to avoid looking at code/tutorials as much as possible, and this is what I’ve come up with so far: https://codepen.io/virginiab/pen/QrdJjM

I know the bios aren’t a requirement but a) I thought it’d be nice to have them and b) the same thing will happen with the status: I’ll have to write another getJSON call with a new url.

So as you can see, something really weird is getting printed to the .bios

.

Can you please guide me in the right direction as to how to fix this? I’m at my wits end here, but I’m really excited and want to keep working on this!

Thanks in advance!


#2

Are you talking about the “No Bio” being added before the actual bio. It looks like your if... conditional is messed up. You can remove that else for now while you troubleshoot. I suggest you fix your formatting. It’s difficult to determine if you’re missing any { } or ( ) with sloppy indenting.


#3

No, actually it’s that all the bios are getting printer to all td’s, instead of each one being printed to a separate td. I guess my mistake was using friggin tables!
The indenting looks great on my codepen lol, this is why I’m not a fan of codepen.


#4
  function getBios(){ 
    for (var n = 0; n < usernamesArray.length; n++){
    var APIbiourl = APIstemurl + "users/" + usernamesArray[n];
    $.getJSON(APIbiourl, function(data1) {
          //console.log(APIbiourl); 
          if (data1.bio != null) {
            $(".bio").append(data1.bio);
          }
          else { 
            // $(".bio").append("No Bio");
        }
      }
    )}
  }

What I’m seeing is your $.getJSON is indented one too deep, and isn’t aligning with it’s closing parenthesis or bracket.

$(".bio").append(data1.bio);

Actually the problem is in this code here, if the bio content is not null, you’re adding the data into all elements with the .bio class.


#5

Fixed the indentation :slight_smile:

Hmm, I see. I figured that was the problem, but I can’t find any other way to add an individual column (or one with a distinct id) to each table row and target them to append the data.


#6
$(document).ready(function() {
  var usernamesArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var APIstemurl = "https://wind-bow.glitch.me/twitch-api/";
  function getChannels(){ 
    for (var i = 0; i <usernamesArray.length; i++){ 
     var APIurl = APIstemurl + "channels/" + usernamesArray[i];
      $.getJSON(APIurl, function(data) {   
        var html="<tr>"+                                                                                                                                "<td><img src=" +'"' + data.logo + '"' + ">"+                                                                                          "</td>"+                                                                                                                              "<td><a href=" + '"' + data.url + '"'+ "target=" +'"' + "_blank" + '"' + ">" + data.display_name + "</a>"+                            "</td><td class="+'"' +"bio"+ '"'+">"+                                                                                                                              "</td></tr>";
                        $("#list").append(html);
                 });         
     }
   }

  function getBios(){ 
   for (var n = 0; n < usernamesArray.length; n++){
   var APIbiourl = APIstemurl + "users/" + usernamesArray[n];
    $.getJSON(APIbiourl, function(data1) {
          //console.log(APIbiourl); 
          if (data1.bio != null) {
            $(".bio").append(data1.bio);
          }
          else { 
            $(".bio").append("No Bio");
          }
      
     })
    }    
   }

              getChannels();
              getBios(); 
     
})// end of document ready 

Like I said, the formatting is still very inconsistent and there is excessive spacing in your var html = "<tr>" string concatenation under getChannels().

Solution

Because you are using separate for... loops, separate from one another, and your functions do not take in any elements to apply actions on, you need some relationship between your function writing the html table rows, and your function fetching the data. I suggest you do this, create a custom class on each generated row. You can do this by using the iterator in your loop added onto a class name. The result will be something like this:

custom-class-name-1
custom-class-name-2
custom-class-name-3

You can do this by using string concatenation as you are already accustomed.

"custom-class-name" + i

It would be better if you instead used a data-attribute, a well known convention for such things, or just create a custom id for each row.

You can then repeat this process in your for loop of the getBios(), instead of using .bio check for the name you create, and use your loop iterator to append to that row.

$(".custom-class-name" + i);