Displaying VODs on external sites

[longshotpro2]

I have been developing a website for about a month now and for the most part I have been able to learn or figure out how to accomplish certain things or find people with similar enough problems on different forums that I can make work in my case. However I have hit a brick wall for the past week and can’t get anywhere.

I am trying to display cards in a 4x2 grid with pagination that will show the title, thumbnail, time since published, & display name. I want to have a variable with the list of channels that I want to pull archives from and then translate that into a most recent list.

Example

Here is the js I have currently. It is an adaptation of code that I use elsewhere that I though I could just use for this as well.

JS Code

$(function(twitchVod) {
var streamers = ['channel1, channel2, channel3, etc'];
var id = 'razet0cvk1luau3gp836fk2kdho7qw';
var getTwitchData = function(streamer) {
    var streamApi =
        'https://api.twitch.tv/kraken/streams/' + streamers[i] + '?client_id=' + id + '&callback=?',
        channelApi =
        'https://api.twitch.tv/kraken/channels/'+streamers+'/videos?client_id=' + id + '?broadcast_type=archive' + '&callback=?';
        /**'https://api.twitch.tv/kraken/channels/' + streamers[i] + '/videos' + '?client_id=' + id;*/
    $.getJSON(channelApi, function(data) {
        $('#lastest-videos').prepend(
            "<div class='g-grid-4 videos' data-v-9394e640='' data-v-bcd95d90=''>" +
                "<div class='video' data-v-9394e640=''>" +
                    "<div class='badge' data-v-9394e640=''></div>" +
                    "<a href='" + data.videos.url + "class='card' data-v-9394e640=''>" +
                        "<div class='title' data-v-9394e640=''>" + data.videos.title + "</div>" +
                        "<div class='thumbnail' style='background-image:url('" + data.videos.preview + "');' data-v-9394e640=''></div>" +
                        "<div class='details' data-v-9394e640=''>" +
                            "<div class='artwork' data-v-9394e640=''></div>" +
                            "<div class='text' data-v-9394e640=''>" +
                                "<div class='name' data-v-9394e640=''></div>" +
                                "<div class='date' data-v-9394e640=''>" + data.videos.published_at + "</div>" +
                                "<div class='author' data-v-9394e640=''>" + data.videos.channel.display_name + "</div>" +
                            "</div>" +
                        "</div>" +
                        "<div class='personalities' data-v-9394e640=''>" +
                            "<div title='" + data.videos.channel.display_name + "' class='personality' style='background-color:#bc1600;' data-v-9394e640=''><img src='/_/res/neffy/40/36155872.jpg' alt='"+ data.videos.channel.display_name +"' data-v-9394e640=''>" +
                            "</div>" +
                        "</div>" +
                        "<div class='actions' data-v-9394e640=''>" +
                            "<div class='action twch' data-v-9394e640=''>" +
                                "<svg inline='' xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' data-v-9394e640=''>" +
                                    "<path d='M5 0h45v30L37.5 42.5h-10L20 50h-7.5v-7.5H0V10L5 0m40 27.5V5H10v30h7.5v7.5L25 35h12.5l7.5-7.5m-12.5-15h5V25h-5V12.5m-7.5 0V25h-5V12.5h5z' data-v-9394e640=''></path>" +
                                "</svg>" +
                            "</div>" +
                        "</div>" +
                    "</a>" +
                "</div>" +
            "</div>" +
        "</div>"
        ); 
    });
};
for (var i = 0; i < streamers.length; i++) {
    getTwitchData(streamers[i]);
}
});

At first it seemed like it was getting the data but not displaying anything, but now it is just a 400 error.

The ultimate goal is to have a list of VODs sorted by most recent from a list of users from both their Twitch & YouTube channels if they have them. The website user can then click on whichever card they want and it direct them to said video on said platform. But I am just tackling this one step at a time so Twitch for now will be good enough for me.

P.S. I am pretty much learning by doing. I was a freelance programmer during high school but got away from everything for a few years so it is taking some time to get back into things as well as using jquery and pulling data from APIs is an all new concept to me.

Thank you for your time!

[BarryCarlyon]

When you get a 400 whats the response message?

Further more, you might want to look at doing a standard jQuery get instead of a getJSON so you can specifiy headers.

This call should make a call to api V3. However, both V3 and V5 are going away. And it’s worth noting that v5 requires ID’s instead of names.

I’m testing your code now to check whats up

Update:

Streamers is an array of one item, should be:

var streamers = [‘channel1’, ‘channel2’, ‘channel3’, ‘etc’];

[longshotpro2]

@BarryCarlyon

var streamers = [‘channel1’, ‘channel2’, ‘channel3’, ‘etc’];

before backing out all the channel names for the purpose of the post it, the var was written correctly. But that being said, I changed the list to just one channel just for the purpose of getting it working first.

So far I have been able to get around using jquery so working through this project has made me use it and I only used the getJSON because it was something I relatively understood and found enough material to work from. I am sure the project is riddled with some bad practices and ways that could be done so much better but its only from what I know, so if it works I am good! However with that being said, I am open to changing anything.