Some stats not loading trough json : Error fetching the game data: TypeError: Cannot set properties of null (setting 'textContent') #140123

unviere · 2024-09-29T15:41:31Z

unviere
Sep 29, 2024

Body

So I load some data from two APIs and one json it loads done info but the stats and images not and the discord icon doesn't popup either trough the json says it's true

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>game??? | unviere </title>
  <meta name="description" content=" ">
    <meta name="author" content="unviere ">
    
    

  <link rel="shortcut icon" type="x-icon" href="Img/unv_games.png">
  
  
  <link rel ="stylesheet" type = "text/css" href ="../games/styles/game.css">
      <link rel ="stylesheet" type = "text/css" href ="Style/topbarv2.css">
      
       
      
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css">
    <link rel="stylesheet" href="Style/images.css">
    
     <script defer type="module" src = "../Scripts/topbar new.js"></script>
</head>
<body>
  <input type="checkbox" id="check">
    
    <label class="sidebar-toggle" for="check"><i class="ri-pushpin-line"id="unpinned"></i><i class="ri-pushpin-fill" id="pinned"></i></label>
    <div id="header">
      
    </div>
   <section class ="game">
     <div class="game-head-section">
          <div class="onrbx"> on Roblox </div>
            <div class="game-top" id="game-header">
       
 
      <div class ="game-top-holder"><a id="top-name" name=""></a>
      
<div class = game-top-left>
        <h1 id="game-title">OnlyFiftyCharactersAreAllowed [new] [update] [tag]</h1>
<div class="stats-top-game">
  <p id="game-developer">by: OnlyFiftyCharactersAreAllowed GroupName (official)</p>  <i class="ri-team-fill" id="stats-icon"><i class="ri-play-fill" id="stats-icon-inner"></i></i>
    <h1 class="desk-title-game-stats">active: </h1>
        <h1 class="active" id="active-top">100k </h1>
        <br>
        <i class="ri-map-pin-user-fill" id="stats-icon"></i>
         <h1 class="desk-title-game-stats">visits: </h1>
        <h1 class="visits" id="visits-top">100k</h1>
        <br>
        <i class="ri-thumb-up-fill" id="stats-icon"></i>
         <h1 class="desk-title-game-stats">liked: </h1>
        <h1 class="likes" id="likes-top">100k </h1>
</div>
        
        </div>

        <div class="game-top-right">
          <div class="game-top-right-mob">
            <div class="game-top-info-parent">
            <a class="game-top-info" ><i class="ri-information-line"></i></a>
            <div class="game-top-info-drop"> <div class="game-top-info-content">
              
            </div>
            </div>
            </div>
            <div class="game-top-nav-parent">
<a  class="game-top-nav" ><i class="ri-more-2-fill"></i></a>
 <div class="game-top-nav-drop"> 
 <div class="game-top-nav-content">
              
            </div>
            </div>
          </div>
          </div>
          <a href="" class="group-icon" id="developer-img"><img src="../Img/unv_games.png"></a>
<div id="game-top-socials"> 
<a href="" class="social" id="discord"><i class="ri-discord-fill social-icon" ></i></a>
<a href="" class="social" id="yt"><i class="ri-youtube-fill social-icon"></i></a>
</div>
<div id="game-top-socials-mob">
  
<div class="game-social-drop-parent">
  <a><i class="ri-arrow-drop-down-line"></i></a> <!-- Just the anchor for the icon -->
  <div class="game-social-drop" id="game-top-socials-drop"> 
    <a href="" class="social" id="discord"><i class="ri-discord-fill"></i></a>
    <a href="" class="social" id="yt"><i class="ri-youtube-fill"></i></a>
  </div>
</div>
</div>
        
         
        </div>
      </div>
     
            </div>
       <div class="game-top-navinfo"></div>

      <div class="game-img" >
        <img id="game-thumb-1" src="Img/tumb_parallel.png">
      </div>

     
      
     

      <div class ="game-playbar">
        <div class="game-playbar-content">
        <a class="game-drop-down-button">•••</a>
  <ul class="game-drop-down">
             
          <li>
            <a href="">Groups</a>
            
            <a href="https://unviere.github.io/Unviere/games">Games</a>
          </li>
        </ul> 
                   <a class="game-playbar-desk-button" href="">Groups</a>
            
            <a class="game-playbar-desk-button" href="https://unviere.github.io/Unviere/games">Games</a>
        <a href="" class="ctaa"><i class ="ri-play-fill"></i>Play now</a>
        <label class="instal" for="toggle-instalrbx" id="instalrbxopen">
        <a><i class =""></i> How to install</a></label>
        
       

      </div>
</div>
      </div>


      
       <div class="game-stats">
        
        <h1 id ="server-size">server size:N/A</h1>
        <br>
        <h1 id ="favorites">favourite:N/A</h1>
        <br>
        <h1 id ="created-date">created N/A</h1>
        <br>
        <h1 id ="last-updated">updated: <a href="https://devforum.roblox.com/t/-/2509865">update log</a></h1>
        <br>
        <h1 id="genre">genre: N/A</h1>
        <br>
        <h1 id="sub-genre">error with loading game stats</h1>
      
        
      </div>
      
        
      
      

      <div class="game-buttons-bar">
      <button class="tablinks" onclick="opentab(event, 'description')" id="main">description</button>
  <button class="tablinks" onclick="opentab(event, 'passes')">Passes</button>
      </div>


          <div id="description" class ="tabs-game-buttons-bar">lorem ipsumthis the description</div>
      
      
        
      </section>
      <template>
  <h1 id="gameTitle">Game Title</h1>
  <img id="gameIcon" src="" alt="Game Icon">
  <p id="gameDesc">lololol hi lorem ipsum dolor sit amet dit for to be do HD so is een is een it en is een je een us en is een to us so us DJ ha en ga aan ga aan ga af ga B zo aan ga V is V ca V ga acc acc zo sa acc ca acc ga acc ga G ra acc zo dat acc zo do to to to if go if you if up to us to if up it uit up je up if up if he up to up it it up ye to get us to ye up to keep FF je je</p>
  <p id="gameActive">Active Players</p>
  <p id="gameOwner">Owner</p>
  <p id="gameLikes">Likes</p>
  <button>play now</button>
  </template>

<script>// Get the header element
document.addEventListener('DOMContentLoaded', function() {
    const socials = document.querySelectorAll('.social-icon'); 
    const header = document.querySelector('.game-top');
    const title = document.querySelector('.game-top-left');
    const social_drop = document.querySelector('.game-social-drop');
    const nav_drop = document.querySelector('.game-top-nav-content');
    const info_drop = document.querySelector('.game-top-info-content');
    const header_navinfo = document.querySelector('.game-top-navinfo')

    // Function to handle scroll behavior
    function handleScroll() {
        const title_sticky = document.querySelector('.game-top-navb-left'); // Requery to get the dynamically loaded element
        if (window.scrollY > 50) {
            header?.classList.add('scrolled');
            title?.classList.add('game-top-left-sticky');
            social_drop?.classList.add('game-top-sticky');
            info_drop?.classList.add('game-top-sticky');
            nav_drop?.classList.add('game-top-sticky');
            title_sticky?.classList.add('game-top-navb-left-sticky');
            header_navinfo.classList.add('game-top-navinfo-sticky')

            socials.forEach(function(social) {
                social.classList.add('sticky-socials');
            });
        } else {
            header?.classList.remove('scrolled');
            title?.classList.remove('game-top-left-sticky');
            social_drop?.classList.remove('game-top-sticky');
            info_drop?.classList.remove('game-top-sticky');
            nav_drop?.classList.remove('game-top-sticky');
           
            title_sticky?.classList.remove('game-top-navb-left-sticky');
            
            header_navinfo.classList.remove('game-top-navinfo-sticky')

            socials.forEach(function(social) {
                social.classList.remove('sticky-socials');
            });
        }
    }

    // Add event listener for scrolling
    if (header && socials.length > 0) {
        window.addEventListener('scroll', handleScroll);
    }

    // MutationObserver to detect dynamically added elements
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                // Check if the node is the element we're looking for
                if (node.nodeType === 1 && node.classList.contains('game-top-navb-left')) {
                    console.log('Dynamically loaded element found:', node);

                    // Apply scroll event once the element is found
                    window.addEventListener('scroll', handleScroll);

                    // Call handleScroll immediately in case the page is already scrolled
                    handleScroll();
                }
            });
        });
    });

    // Observe changes in the entire document
    observer.observe(document.body, { childList: true, subtree: true });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const gameName = window.location.hash.substring(1); // Get game name from the fragment
  console.log('Game Name from URL:', gameName);

  if (gameName) {
    // Static mapping of game names to universe IDs and other details
    const gameDetails = {
      '123456789/parallelized-engineers': { universeId: '4922186765' },
      '116463530852265/the-secret-of-puzle-island': { universeId: '6449806598' },
      '10135698219/happy-obbies': { universeId: '3721966693' }
    };

    const game = gameDetails[gameName];
    console.log('Matching Game Details:', game);

    if (game) {
      const apiUrl = `https://games.roproxy.com/v1/games?universeIds=${game.universeId}`;
      console.log('API URL:', apiUrl);

      // Fetch main game data
      fetch(apiUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error(`Network response was not ok: ${response.statusText}`);
          }
          return response.json();
        })
        .then(data => {
          console.log('Fetched Game Data:', data);
          if (data.data && Array.isArray(data.data) && data.data.length > 0) {
            const gameData = data.data[0];
            console.log('Parsed Game Data:', gameData);

            function formatNumber(num) {
              if (num >= 1e9) {
                return (num / 1e9).toFixed(1) + 'b';
              } else if (num >= 1e6) {
                return (num / 1e6).toFixed(1) + 'm';
              } else if (num >= 1e3) {
                return (num / 1e3).toFixed(1) + 'k';
              } else {
                return num;
              }
            }

            // Update DOM elements with game data
            document.getElementById('game-title').textContent = gameData.name || 'No title available';
            document.getElementById('game-title-top').textContent = gameData.name || 'No title available';
            document.getElementById('description').textContent = gameData.description || 'No description available';
            document.getElementById('game-developer').textContent = `by: ${gameData.creator?.name || 'n/a'}`;
            document.getElementById('game-developer-top').textContent = `by: ${gameData.creator?.name || 'n/a'}`;
            document.getElementById('active-top').textContent = ` ${formatNumber(gameData.playing || '0')}`;
            document.getElementById('visits-top').textContent = ` ${formatNumber(gameData.visits || '0')}`;
            document.getElementById('likes-top').textContent = ` ${formatNumber(gameData.likes || 'N/A')}`;
            document.getElementById('active-nav').textContent = ` ${formatNumber(gameData.playing || '0')}`;
            document.getElementById('visits-nav').textContent = ` ${formatNumber(gameData.visits || '0')}`;
            document.getElementById('likes-nav').textContent = ` ${formatNumber(gameData.likes || 'N/A')}`;
            document.getElementById('gameOwner').textContent = `Owner: ${gameData.creator?.name || 'N/A'}`;

            // Game stats
            document.getElementById('server-size').textContent = `Server size: ${gameData.maxPlayers || 'N/A'}`;
            document.getElementById('favorites').textContent = `Favorite: ${gameData.favoritedCount || 'N/A'}`;
            document.getElementById('created-date').textContent = `Development started: ${new Date(gameData.created).toLocaleDateString() || 'N/A'}`;
            document.getElementById('last-updated').textContent = `Updated: ${new Date(gameData.updated).toLocaleDateString() || 'N/A'}`;
            document.getElementById('genre').textContent = `Genre: ${gameData.genre || 'N/A'}`;

            // Fetch and display game thumbnail
            const imgUrl = `https://thumbnails.roproxy.com/v1/games/multiget/thumbnails?universeIds=${game.universeId}&countPerUniverse=1&defaults=true&size=768x432&format=Png&isCircular=false`;

            fetch(imgUrl)
              .then(response => {
                if (!response.ok) {
                  throw new Error(`Network response was not ok: ${response.statusText}`);
                }
                return response.json();
              })
              .then(thumbnailData => {
                console.log('Thumbnail Data:', thumbnailData);
                if (thumbnailData && thumbnailData.data && thumbnailData.data[0] && thumbnailData.data[0].imageUrl) {
                  const imageUrl = thumbnailData.data[0].imageUrl;
                  document.getElementById('game-thumb-1').src = imageUrl;
                  
                } else {
                  console.error('Invalid image data received from API');
                }
              })
              .catch(error => {
                console.error('Error fetching the thumbnail:', error);
              });

            // Fetch additional info (sub-genres, etc.)
            const infoUrl = `https://raw.githubusercontent.com/unviere/Unviere/refs/heads/main/games/api/game-api%3Fid%3D${game.universeId}.json`;
            console.log('Additional Info URL:', infoUrl);

            fetch(infoUrl)
              .then(response => {
                if (!response.ok) {
                  throw new Error(`Network response was not ok: ${response.statusText}`);
                }
                return response.json();
              })
              .then(infoData => {
                console.log('Fetched Sub-Genre Data:', infoData);
                if (infoData && infoData.data && infoData.data.length > 0) {
                  const subInfoData = infoData.data[0];

                  // Update DOM elements with the additional info
                  document.getElementById('sub-genre').textContent = `Other genres: ${subInfoData.genres || 'N/A'}`;

                  // Make the Discord icon visible based on the response
                  const discordIcon = document.getElementById('discord');
                  if (subInfoData.discord === true) {
                    discordIcon.style.display = "flex";
                    discordIcon.href = subInfoData.discordLink || '#'; // Set the Discord link if available
                  } else {
                    discordIcon.style.display = "none";
                  }
                } else {
                  console.error('No valid sub-genre data found');
                }
              })
              .catch(error => {
                console.error('Error fetching the sub-genre data:', error);
              });
          } else {
            console.error('No valid game data found.');
          }
        })
        .catch(error => {
          console.error('Error fetching the game data:', error);
        });
    } else {
      console.error('Game details not found for name:', gameName);
    }
  } else {
    console.error('No game name found in the URL');
  }
});
</script>
</body>
</html>

Guidelines

I have read and understood this category's guidelines before making this post.

unviere · 2024-09-29T20:01:31Z

unviere
Sep 29, 2024
Author

I fixed it it was a line that break the rest of the script cuz it couldn't found that element

document.getElementById('gameOwner').textContent = `Owner: ${gameData.creator?.name || 'N/A'}`;

I used to test but removed it

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Some stats not loading trough json : Error fetching the game data: TypeError: Cannot set properties of null (setting 'textContent') #140123

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

GitHub Community

Some stats not loading trough json : Error fetching the game data: TypeError: Cannot set properties of null (setting 'textContent') #140123

unviere Sep 29, 2024

Body

Guidelines

Replies: 1 comment

unviere Sep 29, 2024 Author

unviere
Sep 29, 2024

unviere
Sep 29, 2024
Author