CODEWITHSUNDEEP
javascripthtmljson
Raymo111
Raymo111

Reputation: 584

How do I display data from a JSON file on the internet into HTML on my website?

There is a handy IP tracker at https://ipapi.co/json/. I want viewers of my website to see their IP address at the bottom of the webpage. What I have right now is:

<div class="container">
  <div id="IP">IP Address should show here.</div>
  <script>
    document.getElementById('IP').innerHTML = (https://ipapi.co/json/).ip;
  </script>
</div>

However, this doesn't display the IP address. I'm probably using the wrong approach. How do I get it to display correctly?

Edit: I tried doing:

<div class="container">
  <div id="IP">IP Address should show here.</div>
  <script>
    fetch('https://ipapi.co/json/')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        document.getElementById('IP').innerHTML = JSON.stringify(myJson.ip);
      });
  </script>
</div>

But that isn't working either.

Upvotes: 0

Views: 2106

Answers (4)

Valke Allar
Valke Allar

Reputation: 11

You can't just get the data/json from the website by inserting a URL in brackets. Consider reading something about HTTP requests, fetching data, about JSON, and JSON methods: parse() and stringify(), to avoid having similar problems in the future.

https://medium.com/@sahilkkrazy/fetch-vs-axios-http-request-c9afa43f804e

What is difference between Axios and Fetch?

Difference between JSON.stringify and JSON.parse

And there is your example of solution:

fetch("https://ipapi.co/json/")
  .then(function(response) {
    return response.json();
 })
 .then(function(myJson) {
   const ip = myJson.ip;
   document.getElementById("IP").innerHTML = ip;
});

Codesandbox: https://codesandbox.io/s/9ql9zr2o14

Upvotes: 0

JRI
JRI

Reputation: 1932

What you are after is something like this:

<div>IP address: <span id="ipfield">loading...</span></div>
<script>
  function callback(json) {
    document.getElementById("ipfield").innerHTML = json.ip;
  }
</script>
<script src="https://ipapi.co/jsonp/"></script>

Note that the format parameter in the URL for IP API has been changed from json to jsonp. JSONP format is just like JSON, but with a javascript function wrapped around it. When you load a JSONP file as the source for a script, it calls the callback function, passing the JSON data as an argument.

This only works because the site you are using provides the data in JSONP format as well as pure JSON. If it didn't, you would need to use one of the more complicated solutions given in the other answers.

Upvotes: 1

t.m.
t.m.

Reputation: 1470

You might consider using javascript Fetch API.

In your case it could be something like this:

fetch('https://ipapi.co/json/')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    document.getElementById('IP').innerHTML = JSON.stringify(myJson.ip);
  });

Upvotes: 2

Float
Float

Reputation: 43

The keyword you are looking for is AJAX.

AJAX are requests in the background with which you can load more data. However, for security reasons this is not possible for cross-domain. Your only option is to create your own interface in your own backend that provides you with the JSON data.

PS: Your question has been voted down because it seems you haven't even looked for a solution on the internet.

Upvotes: 1

Related Questions