1

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>
2

Opera Στιγμιότυπο_2024-02-25_180831_dev.twitch.tv
Opera Στιγμιότυπο_2024-02-25_180831_dev.twitch.tv1091×666 70.3 KB

3

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/

4

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

5

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

6

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