Unfortunately, I still haven’t managed to solve the original problem. I’m still unable to show consistent results in the same order that I looked for them.
OK, I’ve been thinking about this. I’m still not sure why they have to be in the same order, but since you insist…
Instead of pushing the data into your array - meaning that it gets in there in any old order - why don’t you place it in the “correct” slot. Instead of:
You would have:
That way you’d know it is getting into the array in the right order. (Though your’re probably going to have to bind i).
You could also avoid the problem of a blank screen that way. Since you already know what order they will be in, you can put the names up first. Then you could even call your displayChannelData(data) as the data comes in because you know where it is all supposed to go.
There are so many different ways to approach this. I remember the Twitch project as being the most frustrating of the frontend projects for me. Don’t give up. It took me a couple of tries.
The problem now is that some JSON objects will have data in them, but others will just have an error because they don’t exist (like the “brunofin” example).
But that is part of the test. In real world coding, you have to account for things going wrong.
I would say one other thing if I may - I’m always amazed when I see people who have put all this effort in their CSS and layout and made everything all pretty and their still struggling with the core JS logic. To me all that other stuff is a distraction. It would be like building a car and spending all your time worrying about the windshield wipers before you’re even sure if the engine and drive train works. When I approach a problem like this, the first thing I do is work on the JS logic. Almost all of my outputting is to the console. For this project I would:
- Make sure I can get the data I want and can store it the way I need.
That’s it. That’s the first step. I don’t do anything else until I can do that. That is the toughest part of the whole thing. I would make sure the data loads in and make sure I understand what information is coming in and make sure it is being stored in the way that I want. That is job one.
Once that is done, then I’d start outputting it to the screen and start using CSS to make it pretty and inserting buttons and such and adding events.
If I were you, I might consider creating a new pen and just working on the JS logic until you understand it better. It will also be easier for people to help you if they don’t have to wade through a page of JQuery click handlers to get to the core of your code.
I’m sure there are people that disagree with my approach, but that’s what’s worked for me. Make sure the boat floats before you buy the paint and order the sails.
Just my $.02.