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

Question

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.

score 2 · Accepted Answer · answered Jan 20 '19 at 22:21

2

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);
  });

answered Jan 20 '19 at 22:21

t.m.

1,430
16
29

Thanks for your help, but see my edit. I realize that what you provided was probably a template, but I am absolutely new to JS. I have no idea how to use it. How can I do this? – Raymo111 Jan 20 '19 at 22:27
I tried the edited part of your code in jsBin (https://jsbin.com/cefuvayowe/edit?html,output) using Firefox Browser, it looked okay. Fetch Api is not supported directly in IE and too old versions of other browsers. – t.m. Jan 20 '19 at 22:33
Here's what I'm seeing in Chrome: https://i.ibb.co/2Z6NhB4/image.png No IP address. – Raymo111 Jan 20 '19 at 22:37
I opened the link I gave in Chrome, saw no problem there either. Maybe your browser is blocking the script. You can check console messages of the chrome browser or try it on other browser. Other than that I'm out of ideas :| – t.m. Jan 20 '19 at 22:46
By no problem do you mean you see an ip address? – Raymo111 Jan 20 '19 at 22:56
Hmm, it seems that it's my browser's problem then. The other answer also works for them but not for me. – Raymo111 Jan 20 '19 at 23:14

score 1 · Answer 2 · answered Jan 20 '19 at 22:12

1

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.

answered Jan 20 '19 at 22:12

Float

43
1
6

I tried looking, but all I got was local JSON files. The issue is that my webpage is hosted on GitHub pages, which has no backend (everything is static). How can I show people their IP addresses then? – Raymo111 Jan 20 '19 at 22:20

score 1 · Answer 3 · answered Jan 20 '19 at 22:54

1

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.

answered Jan 20 '19 at 22:54

JRI

1,766
13
25

Which browser are you using? That code works fine for me in Firefox or Chrome. Check the browser's console for error messages, and make sure you included the "p" on the end of the URL for the API. – JRI Jan 20 '19 at 23:05
Chrome. It seems that it's my browser's problem then. The other answer also works for them but not for me. – Raymo111 Jan 20 '19 at 23:14
Try pressing Ctrl-Shift-I to open the browser console in Chrome, and check for errors when your page loads. Also, check that valid JSON code appears on the screen when you open https://ipapi.co/json/ in your browser. If the API can't resolve your IP, it might be sending an error message back, that won't work with the display code. – JRI Jan 20 '19 at 23:32
The json displays as it should, and there are no noticeable errors in inspector – Raymo111 Jan 22 '19 at 22:49

score 0 · Answer 4 · edited Jan 21 '19 at 14:35

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

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

4 Answers4