Making a json request with javascript

Question

I'm making a web app that uses an API. The problem is that I never did JSON requests with javascript (I used to work with python). Here is my code :

<head>
  <title>IP finder pro</title>
  <script>
    function find_ip() {
      var ip = document.getElementById('ip_input').value;
      fetch('http://ipapi.co/8.8.8.8/json')
      .then(response => response.json())
      .then(data => alert(data));
}
  </script>
</head>
<body>
  <input id="ip_input">
  <button id="ip_button" onclick="find_ip()">Click !</button>
</body>

This is the JSON file :

{
    "ip": "8.8.8.8",
    "city": "Mountain View",
    "region": "California",
    "region_code": "CA",
    "country": "US",
    "country_code": "US",
    "country_code_iso3": "USA",
    "country_capital": "Washington",
    "country_tld": ".us",
    "country_name": "United States",
    "continent_code": "NA",
    "in_eu": false,
    "postal": "Sign up to access",
    "latitude": "Sign up to access",
    "longitude": "Sign up to access",
    "timezone": "America/Los_Angeles",
    "utc_offset": "-0700",
    "country_calling_code": "+1",
    "currency": "USD",
    "currency_name": "Dollar",
    "languages": "en-US,es-US,haw,fr",
    "country_area": 9629091.0,
    "country_population": 310232863.0,
    "message": "Please message us at ipapi.co/trial for full access",
    "asn": "AS15169",
    "org": "GOOGLE"
}

And this is the curl command :

curl 'https://ipapi.co/8.8.8.8/json/'

Do you have any idea of how I could do this?

sebastian-ruehmann · Accepted Answer · 2020-06-17 09:03:22Z

3

You can use the fetch API for that and decode your JSON. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

answered Jun 17, 2020 at 9:03

sebastian-ruehmann

4932 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

edi Over a year ago

I think fetch is the best solution. However, you need to be aware that it is not supported by all browser or older versions of them. If you e.g. need to support crappy IE it is probably better to use some kind of http-request library.

Noé Over a year ago

It returns me this : [object Object].

sebastian-ruehmann Over a year ago

mhh.. That's odd. Can you supply your implementation of that example?

Mo. · Accepted Answer · 2020-06-17 09:08:02Z

1

You can also use Ajax.

function ajax_get(url, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log('responseText:' + xmlhttp.responseText);
        try {
            var data = JSON.parse(xmlhttp.responseText);
        } catch(err) {
            console.log(err.message + " in " + xmlhttp.responseText);
            return;
        }
        callback(data);
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();
}


ajax_get('your url', function(data) {
  // Do stuff with it -> data["yourvalue"];
});

answered Jun 17, 2020 at 9:08

Mo.

3995 silver badges18 bronze badges

Comments

Žygimantas Pusvaškis · Accepted Answer · 2020-06-17 09:38:00Z

1

Try this solution

var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var Obj = JSON.parse(this.responseText);
            console.log(Obj);
           }
        };
    xmlhttp.open("GET", "your_json_file.json", true);
    xmlhttp.send();

answered Jun 17, 2020 at 9:38

Žygimantas Pusvaškis

173 bronze badges

Collectives™ on Stack Overflow

Making a json request with javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related