title: How do I display data from a JSON file on the internet into HTML on my website?
body: <p>There is a handy IP tracker at <a href="https://ipapi.co/json/" rel="nofollow noreferrer">https://ipapi.co/json/</a>. I want viewers of my website to see their IP address at the bottom of the webpage. What I have right now is:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="IP"&gt;IP Address should show here.&lt;/div&gt;
    &lt;script&gt;
      document.getElementById('IP').innerHTML = (https://ipapi.co/json/).ip;
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, this doesn't display the IP address. I'm probably using the wrong approach. How do I get it to display correctly?</p>
  
  <p>Edit:
  I tried doing:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="IP"&gt;IP Address should show here.&lt;/div&gt;
    &lt;script&gt;
      fetch('https://ipapi.co/json/')
        .then(function(response) {
          return response.json();
        })
        .then(function(myJson) {
          document.getElementById('IP').innerHTML = JSON.stringify(myJson.ip);
        });
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But that isn't working either.</p>