Help With Twitch API zipline

1

my pen: https://codepen.io/Azrah/pen/rzOQEw?editors=1111

So, I could make 6 ajax requests, one for each streamer, but that would be too long, and I want to use forEach, but the problem is, I can get the results I want in the console (five “offline” and one game name)
but I can’t transfer that to my p elements, how can I do that?
I tried a for loop, since the p ids are title0 to title5, i can use $(’#title’+i) to assign things to them in a loop and I used this method in the last zipline, but I can’t get it to work here.
tried to create an i variable in the forEach loop and add one to it in the end of the loop to use $(’#title’+i) this way, didn’t work.
I really am stuck and need help D:

2

Your JS seems solid enough, but it’s a bad idea to hard-code your HTML like that. What you’ll want to do is create a new element and append it to your DOM inside of your done method (though you may want to use then instead if done doesn’t return a promise).

streamers.forEach(function(streamer) {
    function url(stream) {
      return "https://wind-bow.gomix.me/twitch-api/streams/" + stream;
    }

    $.ajax({
      url: url(streamer),
      type: "GET",
      dataType: "jsonp"
    }).done(function(data) {
      if (data.stream !== null) {
        $('#some-container').append(`<div class="twitch-game">${data.stream.game}</div>`);
      } 
    });
  });

Of course, you’ll probably want to append more than just a single div, and you’ll have to handle the case where there is no stream data, but this is the basic idea. You can clean it up even more by using Handlebars. Check out this video for an example.

2 Likes
3

Thanks for the help!
using append really simplifies things, but I have one more issue.
My updated pen: https://codepen.io/Azrah/pen/rzOQEw
I’m appending a hyperlink too, and when I open the link in a new tab it works perfectly, but when I click it normally, my codepen screen becomes white, and that’s it.
Why does that happen?

4

It explains this issue on the tribute challenge and profile challenge pages.

Codepen does not directly open links due to security reasons. It is mentioned at the end of the video below on the Tribute challenge page:

On point 9 of Profile challenge page it explains:

Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.

5

I added target=_blank to the append, and it opened the white window in a new tab

6

You added the target=’_blank’ to line 30 of your code(the html that adds the online stream link) and I just tested your pen and it does open a new window and open the twitch website on my browser.

I noticed that you did’nt add the target=‘blank’ on line 22(which adds the offline links):
<div class=offline><a href="https://twitch.tv/${streamer}">${streamer}</a> offline</div>

on this line of code you have not added “” marks on the class and href. You did on line 30 but not here.

Also when you say “and it opened the white window in a new tab”, it might be that the server is taking a long time top open the page, because I noticed in general with twitch that when I try to open a link it takes a long time to load.

As a side not I am not 100% sure how codepen handles opening links without the target=’_blank’. I just experimented with some of my pens and if I take the target= out the links do not work except the wikipedia one, that one does open within codepen for me. I am guessing it depends on the site?

But saying that when I ran your pen from my android phone and clicked an online stream it opened the twitch page within the pen.

7

yeah I forgot about the target blank in the offline :confused:
but after adding it, and the “” marks, all my links lead to a white twitch page, the chrome tab shows twitch icon, but the page doesn’t fully load, and I’m waiting a long time here.
I’ll try to open it on my phone to test.
EDIT: yeah, it works on my phone, maybe its my browser that’s bugged.

9

Yeah that works, and I noticed that even the example pen for this zipline has this issue, guess I’ll just complete the challenge and move on to algorithm

1 Like