Problem with api

Good evening, while jar the customer ID does not show anything, what is the problem?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitch Categories</title>
<style>
  .category {
    margin-bottom: 10px;
    cursor: pointer;
}

.category img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    vertical-align: middle;
}

.category .viewer-count {
    font-size: 14px;
    color: #666;
}
  </style>
  
</head>
<body>

<div id="categories-list"></div>

<script>
const categoriesList = document.getElementById('categories-list');

fetch('https://api.twitch.tv/helix/games/top', {
    headers: {
        'Client-ID': 'x3y7n6g********e515tq4' // Αντικαταστήστε το "your_client_id_here" με το πραγματικό Client ID της εφαρμογής σας
    }
})
.then(response => response.json())
.then(data => {
    data.data.forEach(category => {
        const categoryItem = document.createElement('div');
        categoryItem.classList.add('category');
        categoryItem.innerHTML = `
            <img src="${category.box_art_url.replace('{width}', '50').replace('{height}', '50')}">
            <span>${category.name}</span>
            <span class="viewer-count">${category.viewer_count} viewers</span>
        `;
        categoryItem.addEventListener('click', () => {
            window.open(`https://www.twitch.tv/directory/game/${encodeURIComponent(category.name)}`, '_blank');
        });
        categoriesList.appendChild(categoryItem);
    });
})
.catch(error => console.error('Error fetching categories:', error));
</script>

</body>
</html>

What do you mean by jar and customer ID

Your code lacks a Authorization header/token

a demo getting a token and making this call:

https://barrycarlyon.github.io/twitch_misc/examples/browse_categories/

I just want a code that shows the categories and the number of live viewers

Then optimally, assuming this is for a website, you’d have a server side script using a client credentials token to collect the data and populate a database or other cache and your website shows from that.

Then you don’t leak a token or ask a user for a token.

And the logic in the example I linked does exactly what, gets the top games and the approx viewership for that game

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.