Obviously your best guess is to ask the user. That being said, we generally want to avoid interrupting the user. Websites and apps are (or at least should be) about what the user's needs not ours.
That being said, given the many legislation requirements such as GDPR and cookie policy within the EU, it would be useful to know if we should display certain messaging.
Solution
Let's break it down.
Wrap everything in an IIFE to avoid global namespace pollution:
(async function () { //Our code goes here.. keep reading })();
Write a function to get the data from an IP lookup API. The function takes an optional
ip
parameter. If no value is given, no worries, the API will use the current IP that is making the call. In this case this will be the IP of whoever is visiting the page. The function willfetch
the data,await
for the reply and parse it. Parsing is minimal,fetch
has methods to treat responses asJSON
or text. we simply transform a text response into aboolean
value -true
if from EU andfalse
if not. Simple right?/** * Check if from EU based on IP * @param {string} [ip] - IP, default is current * @returns {string} - true/false if IP is from EU (https://ipapi.co/api/#complete-location) */ const fromEU = async function fromEU(ip) { let url = 'https://ipapi.co/'; if (ip) { url += ip + '/'; } url += 'in_eu/'; return fetch(url) .then(function (response) { return response.text(); }) .then(function (txt) { if (txt === 'True') { return true; } else { return false; } }); };
Remember, the function you just wrote is
async
, soawait
for the parsed reply (true
/false
). This would also be a great time to handle any errors, for this simple demo, let's justlog
toconsole
.//Get data from IP lookup API const isFromEU = await fromEU().catch(function (err) { console.log(err); });
Do something with the data we just got. I admit, this is not particularly creative, but it'a a very direct way to show what this tutorial is about. Basically, if this IP is within the EU we want to checkmark and if not, then no checkmark.
//Un/check if from the EU let checked = ''; if (isFromEU) { checked = 'checked'; } document.getElementsByTagName('body')[0].innerHTML = '<label><input type="checkbox" name="fromEU" ' + checked + '>I am from the EU</label>';
For the full code, check the demo above.
Questions? Comments? Let me know here or @danielcobocom.
API disclaimer
Whenever you are using an API, like in this case it's an IP lookup service, be sure to check the terms, pricing, etc. APIs are great for adding function and often save time and money, but at the same time they can be points of failure, so always take some time to make sure the API is a good fit for your project.