It appears that something I did has created a wonky outcome.
Below is the code for the 4 API items i am trying to pull. It does pull 3 of the 4 (for some reason recent follower isn’t displaying). However, all the data is only appearing under the last in the list “Followers” rotating between each item.
Or is there a better way to do what I am trying to do? I’m understanding the API better each day, and I am also curious if this could be done better with curl.
Example (bottom of page) : http://www.darklyte.tv/
<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="title" width="49" height="49" align="center"> Title:</div>
<div id="status" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('status');
setInterval(_ => {
fetch('https://api.twitch.tv/kraken/channels/116300654', {
headers: new Headers({
'Client-Id': '//',
'Accept': 'application/vnd.twitchtv.v5+json'
})
}).then(response => response.json()).then(data => {
ve.textContent = data.status;
});
}, 10000);
</script>
<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="game" width="49" height="49" align="center"> Playing:</div>
<div id="game" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('game');
setInterval(_ => {
fetch('https://api.twitch.tv/kraken/channels/116300654', {
headers: new Headers({
'Client-Id': '//',
'Accept': 'application/vnd.twitchtv.v5+json'
})
}).then(response => response.json()).then(data => {
ve.textContent = data.game;
});
}, 10000);
</script>
<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="game" width="49" height="49" align="center"> Latest Follower:</div>
<div id="name" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('name');
setInterval(_ => {
fetch('https://api.twitch.tv/kraken/channels/116300654/follows?direction=DESC&limit=1', {
headers: new Headers({
'Client-Id': '//',
'Accept': 'application/vnd.twitchtv.v5+json'
})
}).then(response => response.json()).then(data => {
ve.textContent = data.name;
});
}, 10000);
</script>
<div style="display: inline-block;"><img class="top" src="http://www.darklyte.tv/wp-content/uploads/2016/10/vote.png" alt="Followers" width="49" height="49"> Followers:</div>
<div id="followers" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('followers');
setInterval(_ => {
fetch('https://api.twitch.tv/kraken/channels/116300654', {
headers: new Headers({
'Client-Id': '//',
'Accept': 'application/vnd.twitchtv.v5+json'
})
}).then(response => response.json()).then(data => {
ve.textContent = data.followers;
});
}, 10000);
</script>