IP Address Location : Javascript Examples

ipapi ~ ipapi.co
Jun 25, 2019 · 2 min read

One of the best examples of our IP address geolocation service is being able to find the location of an IP address for a website, right from the browser.

Every week we receive dozens of support requests of users asking for quick start examples of integrating IPAPI in their website with Javascript. We are delighted to address each one of those requests and we have compiled a list of different methods people use to access the API here, for a handy reference.

IP address location with plain JS:

Most modern browsers now support fetch() API — a JS interface that is a better alternative over XMLHttpRequest, and looks similar to jQuery.ajax(). Fetch returns a promise containing the response from which you can obtain the JSON body.

// 1 - fetch() : Newer methodfetch('https://ipapi.co/json/')
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});
// 2 - XMLHttpRequest : Older methodvar req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.open('GET', 'https://ipapi.co/json/', true);
req.onload = function() {
console.log(JSON.parse(req.responseText));
};
req.send(null);

Fork fetch() example on Repl.it
Fork XHR example on Repl.it

Repl.it : JSON IP Lookup with Fetch API

jQuery : If you are already using jQuery, there are a couple of ways to get the location:

// 1 - jQuery.get() : Complete JSON object
$.get('https://ipapi.co/json/', function(data) {
console.log(data)
})
// 2 - jQuery.getJSON() : Complete JSON object
$.getJSON('https://ipapi.co/json/', function(data) {
console.log(data)
})
// 3 - jQuery.get() : Specific field
$.get('https://ipapi.co/city/', function(data) {
console.log(data)
})
// 4 - jQuery.ajax()
$.ajax({
dataType: "json",
url: "https://ipapi.co/json/",
success: function(data){
console.log(data);
}
})
// 5 - JSONP (JSON with padding) example for older browsers
$.getJSON("https://ipapi.co/jsonp/?callback=?",function(json){
console.log(json);
});

// 6 - JSONP
: An elaborate example
function mycallback(json){
console.log(json);
}
$.ajax({
url: "https://ipapi.co/jsonp/",
dataType: "jsonp",
jsonpCallback: "mycallback"
});

The response in all the above examples (except when a specific field is requested) is a JSON object that looks like this (more details in our API documentation)

{ip: “8.8.8.8”, city: “Mountain View”, region: “California”, region_code: “CA”, country: “US”, …}

Note : IPAPI supports CORS (Cross-Origin Resource Sharing) & JSONP. , so you can make a call to our API endpoint from your website (domain) without being blocked by the same-origin policy restrictions in web browsers.

ipapi ~ ipapi.co

Written by

IP Lookup | IP Location | Geolocation API — Best IP Address Finder — https://ipapi.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade