Elements passed from Javascript render from bottom to top

JavaScript
1

Here’s my Pen so far: https://codepen.io/GiaFil/pen/JvGpqN
When I try to render the html variable, the elements render from bottom to top despite appearing from top to bottom the console.log(html) statement. I’m confused as to why this happens because it doesn’t happen here: https://codepen.io/GiaFil/pen/GxaVNb, despite them being similar. Any suggestions?

2

It’s because ajax requests are asynchronous, so you won’t have the same order as what’s an the array. You could rearrange the elements after the for loop has completed.

3

That’s not what I am asking. Click the link and you’ll see what I mean.

4

Im on a phone so codepen is not really usable and I can’t check this, but afaics looks like you’re rerendering to the DOM on each loop iteration: move the .html(html) out of the loop, the loop should just build the string. Also log the html string on each iteration to see how it builds up, that seems to be where the issue lies

Edit: just looking more closely and the whole thing is inside a callback, I see why you are rerendering now, use append not html, you shouldn’t be replacing the html every time.

5

Using .append made things worse. Now elements repeat, whereas when I used .html it just rendered all elements once, only in the wrong direction for some reason…

6

Append is logically the correct thing to use here: select an element, then append html to it on each iteration. For it to be repeating suggests something is in the wrong place. Try setting up the html to append inside the loop (the var html = "") so that it starts from scratch each time, then append at the end of each iteration

7

I’m seriously lost… I put the definition of html inside the loop, but still the same result. The html in the console looks goods though…

8

Ahahaa, in front of a computer now:

Setup string here:

$.getJSON("https://wind-bow.glitch.me/twitch-api/streams/" + channels[i] +"?callback=?",channels,function(data) {
  var html = "";

It is to do with the rendering, use prepend not append

$(".ch_st").prepend(html);

I’m a bit tired and my brain isn’t working properly, I can’t figure out append is going backwards :\

9

It’s still wrong. The elements are rendered from top to bottom namewise but still upwards. I thought maybe I could render outside the function, if I had access to html outside of it. I tried to return it but it didn’t work.

10

That renders them in order they are in the array, I’m not sure how else you want them rendered?

11

Below the channel/status bar.

12

This took far too long. Why, in the html, is there a negative margin applied to every one of those channels? You get that, every time you render one out, there will be a negative margin, ie it will literally do the exact opposite to a margin with a positive value.

1 Like
13

FINALLY! It worked. I put negative there,the same as the channel/status bar, because I wanted to be the same stylewise. Thank you for your time and patience!

1 Like
14

:joy: god that took ages for me to notice. You should be able to just use append, and it should work fine

1 Like