Best way to access properties within objects from an api

Hello everyone

I started learning the fetch API, and an building a simple basketball score tracking app.

I noticed that it isn’t loading very fast or at all sometimes. Could you take a look at it in dev tools and see if you can tell why?

I know the code is pretty messy, and I need to remove a lot of the commented stuff, but I’m assuming that wouldn’t be why.

Is there a certain way that I’m doing something causing it to be resource intensive?

I’m not sure if the way I’m accessing the properties within the object is the best way to do it. For example, I’m doing something like: homeTeamDiv.textContent = nextGame[0].competitions[0].competitors[0].team.shortDisplayName

Would it be better to just set nextGame[0].competitions[0].competitors[0].team.shortDisplayName
` to a variable, then set the homeTeamDiv.textContent to that variable?

The other possibility that I’ve considered is because I’m just using the cdn for tailwind for prototyping. I still wouldn’t think it would make it that slow though.

I’m open to any suggestions on how I should refactor the code. I want to get it right before I continue.


Here’s all the code:

  const PISTONS_URL = ''

  .then((response) => {
    return response.json();
  .then((pistonsJSON) => {
    //Set the JSON data for games to a variable
    const pistonsData =
    const nextGame = pistonsData.nextEvent

    //create function to show upcoming or current game
    const showNextGameData = () => {
      //let startTime = document.getElementById('startTime')
      let startDate = document.getElementById('startDate')
          startDate.textContent = nextGame[0].competitions[0].status.type.shortDetail
      //Set home team div to display home team name
      let homeTeamDiv = document.getElementById('homeTeamDiv')
          homeTeamDiv.textContent = nextGame[0].competitions[0].competitors[0].team.shortDisplayName
      //create img element using home teams logo and append to home team div
      let homeTeamLogo = document.getElementById('homeTeamLogo')
          homeTeamLogo.src = nextGame[0].competitions[0].competitors[0].team.logos[0].href
      //Set quarter and clock
      let quarter = document.getElementById('quarter')
          quarter.textContent = nextGame[0].competitions[0].status.period
      let remainingTime = document.getElementById('remainingTime')
          remainingTime.textContent = nextGame[0].competitions[0].status.displayClock

      //Hide time remaining if game hasn't started yet
      let timeLeft = document.getElementById('timeLeft')
        if (quarter.textContent = '0') {
 = 'none'
        } else {

      //Set visitor team div to display visitor team name
      let visitorTeamDiv = document.getElementById('visitorTeamDiv')
          visitorTeamDiv.textContent = `${nextGame[0].competitions[0].competitors[1].team.shortDisplayName}`
      let visitorTeamLogo = document.getElementById('visitorTeamLogo')
          visitorTeamLogo.src = nextGame[0].competitions[0].competitors[1].team.logos[0].href


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="^1.0/dist/tailwind.min.css" rel="stylesheet">

    <div class="container mx-auto bg-blue-600 py-4">
        <h1 class="text-3xl mx-4">Stons</h1>

        <h2 class="text-base my-5">Next Game:<span id="startDate" class="mx-2"></span></h2>
        <div id="nextGameContainer" class="border border-gray-300 rounded mx-4 my-4 text-lg flex justify-between max-w-sm md:max-w-lg lg:max-w-xl mx-auto">
            <div id="homeContainer" class="flex flex-col items-center py-4 pl-4">
                <img id="homeTeamLogo" class="w-12 h-12"></img>
                <div id="homeTeamDiv" class=""></div>
            <div id="timeLeft" class="flex flex-col items-center">
                <p class="text-xs">Quarter: <span id="quarter"></span></p>
                <div id="remainingTime"></div>
                <!-- <span id="startTime" class="text-base"></span> -->
            <div id="visitorContainer" class="flex flex-col py-4 pr-4">
                <img id="visitorTeamLogo" class="w-12 h-12"></img>
                <div id="visitorTeamDiv" class=""></div>

<!-- <script src="./dayjs.js"></script> -->
<script src="./app.js"></script>

You have to use https for the api URL otherwise it will be blocked by the browser.

app.js:60 Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.

Other than that it seems to load just fine.

That won’t make any difference as you have already assigned the JSON to a variable in the fetch. It is, however, possible that you can make the code a bit cleaner using some object destructuring. And if you needed to use the same data again later it would make sense to save it in a variable so you didn’t have to write out all that property accessing again.

A Dead Simple intro to Destructuring JavaScript Objects

Thank you! That’s good to know, I would’ve never thought about the browser blocking the link.

I will look into destructing as well. It might make sense to save to a variable at least a couple of steps down the line, if that makes sense. Though, outside of this section I won’t be using that specific data again.