So, everything with the API’s and so on is successful so far, except for displaying the channel and its status.
I have tried using the text-align thing, but every time the page is refreshed the positions change and I’m not exactly sure why. It’s been really frustrating and I cannot seem to find a css solution to the problem.
Would anyone kindly help?
Wow, there is a lot going on there.
Just looking at your code, you’ve got styles being assigned in your HTML, your CSS, and your JS, for example. It’s hard to keep track of. In general, styles should be addressed in the CSS, given to classes. In HTML you can assign the classes, and in the JS, you can change the classes if needed.
I would suggest simplifying. For one thing, for me, the “make everything pretty” is the last thing I do. I like to make sure I get the JS to work since that’s the hardest part. If I worry too much about styling in the beginning, it just gets in the way. To me the styling is the easiest part. And it’s hard for me to see how I’ll want to style it until I know what I’ve got.
My recommendation would be to get rid of all that styling and just make a simple list of the data in the screen. Make sure your logic is working. Then build from there.
For example, instead of writing out each JSON call individually, what about a loop? Put your usernames in an array and loop through that array, with two JSON calls in the array, one for users and one for streams. Just output that to an unordered list. Then build from there. Take it one step at a time and test as you go.
Sorry I don’t have time right now to go through your code, but my advice probably would have been the same anyway.
Thank you! I’ll do just that and see how things work. I really appreciate your feedback!
I think what I’m stuck with now is getting the order of the items in the array to be preserved when displayed into the unordered list. I’m not sure why it’s not being preserved, though?
Sorry, I’m at work so I can’t check your code.
But keep in mind that they don’t have to be in a particular order.
The reason (I’m assuming) that they’really getting out of order is because they are being filled asynchronously. That is the nature of AJAX. You are making those AJAX calls to the twitch API and there is no guarantee of when that data is going to be returned. The data comes back for each AJAX call when it comes back, and there is no guarantee of what order. When an AJAX call gets back, it calls it’s callback and fills in the data.
Again, there is no requirement that they be in any order. If you really want it in order, there are some options. As the data comes back, you could store it in an array and wait until it’s all back until outputting it. You could either sort it then, or you could save it to a specific index as it comes back. I guess another option would be to build the html list with JQery at the beginning, giving each an ID based on it’s index, and then you could tagert this IDs with their data as it comes back.
But again, I wouldn’t worry about it.
As @ksjazzguitar said the result of the requests are not in order because of the asynchronous behavior of javascript.
Try to use https://api.jquery.com/deferred.done/ so you can call the second getJSON as a callback function of the first one (for each channel).
Thank you for your time! Once again, sorry to bother you!
Finally done. Via your feedback, I had started back from scratch and decided to build my code a lot more neatly. I have ran into problems such as closures, which might not be necessary but it was quite useful to read a bit about.
In case you’d like to have a look or give a bit of feedback, here it is: https://codepen.io/derbergfex/pen/JyLRWd?editors=0010
Thank you so much for your time!
I’ll start working on that, thank you! Do you recommend any useful articles on that?
Cool, it looks so much better. Works nicely, and your code is sooooo much easier to follow now. And if you came back in a year to fix something or if you had to hand it off to someone else, you just prevented a nightmare.