title: Attempting To Use Fetch() to Retrieve JSON API Data and Include in HTML Document
body: <p>I am completely inexperienced with JavaScript but I am working on a website that needs to pull updated stats from an API. After doing some reading and following a few tutorials, I'm still pretty lost. Any help would be appreciated.</p>
  <p>Here is what I have and it's not working and I'm not sure if I'm even on the right path.</p>
  <p>JS</p>
  <pre class="lang-js prettyprint-override"><code>const api_url = 'https://plutonium.pw/api/stats'
  async function getData() {
    const response = await fetch(api_url);
    const data = await response.json();
    const { bans } = data;
    
    document.getElementById(&quot;bans&quot;).textContent = bans;
    console.log(bans);
    
  }
  
  getData();
  </code></pre>
  <p>HTML</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Test Page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;p&gt;bans: &lt;span id=&quot;bans&quot;&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://codepen.io/thepeterg/pen/oNzorWj" rel="nofollow noreferrer">CODEPEN</a></p>