Country is not GB show info - ipinfo.io

Hi I have found this code to show details of the user on the page, I want to only show this is the country is not GB, any ideas ? thanks

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
		$.get('https://ipinfo.io',function(response){
		$("#ip").html('IP: <b>'+response.ip+'</b>');
		$("#city").html('City: <b>'+response.city+'</b>');
		$("#region").html('Region: <b>'+response.region+'</b>');
		$("#country").html('Country: <b>'+response.country+'</b>');
		$("#location").html('Location: <b>'+response.location+'</b>');
		$("#org").html('Org: <b>'+response.org+'</b>');
	},'jsonp');
	
</script>

What does the documentation say?

You want to do this in JavaScript (you posted in the JS forum)?

If so, best way I can think of is to grab the user’s lat and long using navigator.geolocation.getCurrentPosition(), then feed that into an external service (like this one) and deal accordingly with the result.

Ref:

Further reading:

Have a look at the code you have found, see where it displays the user location information, then compare it to the values you want to detect, then display the appropriate message. It’s a bit difficult to provide much detail as you haven’t shown or linked to the specific code.

hi im a bit lost on this as im beginner in javascript ? I have the code below if you can help, thaks


<hr/>

<div id="ip">Loading.........</div>
<div id="city">Loading.........</div>
<div id="region">Loading.........</div>
<div id="country">Loading..........</div>
<div id="location">Loading.........</div>
<div id="org">Loading.........</div>
<hr/>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
		$.get('https://ipinfo.io',function(response){
		$("#ip").html('IP: <b>'+response.ip+'</b>');
		$("#city").html('City: <b>'+response.city+'</b>');
		$("#region").html('Region: <b>'+response.region+'</b>');
		$("#country").html('Country: <b>'+response.country+'</b>');
		$("#location").html('Location: <b>'+response.location+'</b>');
		$("#org").html('Org: <b>'+response.org+'</b>');
	},'jsonp');
	
</script>

OK, so you can see that the country is contained in response.country, so straight away you can narrow the code down to only display that piece of information.

Then have a quick look at comparisons in JavaScript, and see how you compare a string value (which is your variable response.country to a fixed value, which is whatever it displays for Great Britain. You can then write a little bit of code to display whatever you want if it is, or is not, equal.

ok thanks would you know a start point for this bit of code ?

Like so:

$.get('https://ipinfo.io',(res) => {
  if(res.country !== "GB"){
    // Display details of the user on the page
  }
},'jsonp');

thanks is that saying if country is equal to GB then display info on page ?

Nope, if the country is not equal to GB (note the exclamation mark).

Ok so I now have this ? how do i get it to display a message if the country is not GB, im testing using localbrowser.com for another country ? thanks for your help so far

<hr/>

<!-- <div id="ip">Loading.........</div>
<div id="city">Loading.........</div>
<div id="region">Loading.........</div> -->
<div id="country">Loading..........</div>
<!--<div id="location">Loading.........</div>
<div id="org">Loading.........</div> -->
<hr/>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
		$.get('https://ipinfo.io',function(response){
		$("#ip").html('IP: <b>'+response.ip+'</b>');
		$("#city").html('City: <b>'+response.city+'</b>');
		$("#region").html('Region: <b>'+response.region+'</b>');
		$("#country").html('Country: <b>'+response.country+'</b>');
		$("#location").html('Location: <b>'+response.location+'</b>');
		$("#org").html('Org: <b>'+response.org+'</b>');
	},'jsonp');
	
	$.get('https://ipinfo.io',(res) => {
  if(res.country !== "GB"){
    // Display details of the user on the page
  }
},'jsonp');
	
</script>

Replace your current JS with this:

$.get('https://ipinfo.io', (res) => console.log(res), 'jsonp');

What is logged to the console?

One problem there is that you’ve duplicated the code - you see you already have a line starting $.get, and then you’ve added a second one for the code @James_Hibbard suggested. Apart from anything else, that’s two calls to the site so will slow things down a little, and contribute to your allowance on there, whether paid or free.

When I was talking about isolating the display so it only shows the country, you’ve partly done that by removing the <div>s that contain the other information. But you should also change the function that sticks values in them once it has retrieved them. But now you have working code, you can remove that function entirely.

1 Like

I’m in Germany (so country code “DE”). This works for me:

<div id="res"></div>
$.get('https://ipinfo.io', (res) => {
  if(res.country !== 'GB'){
    $('#res').html(`
      <strong>IP:</strong> ${res.ip}<br>
      <strong>City:</strong> ${res.city}<br>
      <strong>Region:</strong> ${res.region}<br>
      <strong>Country:</strong> ${res.country}<br>
      <strong>Location:</strong> ${res.location}<br>
      <strong>Org:</strong> ${res.org}
    `)
  }
},'jsonp');

thanks however im a bit lost now is the below code wrong?

<div id="ip">Loading.........</div>
<div id="city">Loading.........</div>
<div id="region">Loading.........</div> 
<div id="country">Loading..........</div>
<div id="location">Loading.........</div>
<div id="org">Loading.........</div> 
<hr/>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
		$.get('https://ipinfo.io',function(response){
		$("#ip").html('IP: <b>'+response.ip+'</b>');
		$("#city").html('City: <b>'+response.city+'</b>');
		$("#region").html('Region: <b>'+response.region+'</b>');
		$("#country").html('Country: <b>'+response.country+'</b>');
		$("#location").html('Location: <b>'+response.location+'</b>');
		$("#org").html('Org: <b>'+response.org+'</b>');
	},'jsonp');
	
	$.get('https://ipinfo.io',(res) => {
  if(res.country !== "GB"){
    // Display details of the user on the page
  }
},'jsonp');
	$.get('https://ipinfo.io', (res) => console.log(res), 'jsonp');

	
</script>

Not wrong as such, but you’ve now added a third call to get the same information. Each function (from the opening { to the balancing } ) that starts with $.get is calling that web site to retrieve information. So you could easily delete from the first time that appears, to the line immediately before the last time it appears. Then run the page with your browsers developer console open, and see what is logged.

If you’re new to JavaScript, you need to have a look through how to do basic coding, and then look for comparison operators and how to use them. It’s a bit outside the scope of a forum to go over really basic stuff like that.

This will display user info if the user is (according to the service you are using) outside of GB.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IP lookup</title>
</head>
<body>
  <div id="res"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $.get('https://ipinfo.io', (res) => {
      if(res.country !== 'GB'){
        $('#res').html(`
          <strong>IP:</strong> ${res.ip}<br>
          <strong>City:</strong> ${res.city}<br>
          <strong>Region:</strong> ${res.region}<br>
          <strong>Country:</strong> ${res.country}<br>
          <strong>Location:</strong> ${res.location}<br>
          <strong>Org:</strong> ${res.org}
        `)
      }
    },'jsonp');
  </script>
</body>
</html>

As dropsnoot says, if you’re new to JavaScript, you should really have a look through a basic how-to guide. You’ll save yourself a lot of headaches in the long run.

Hi yes I need to do that, im keen to learn more as I go…

strange that code does not work for me when i test it with either local or nay other. I have copied that cop snippit fresh into a html page ?

Change the code like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IP lookup</title>
</head>
<body>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $.get('https://ipinfo.io', (res) => console.log(res), 'jsonp');
  </script>
</body>
</html>

What is logged to the console?

shows blank screen for me, for me and when I test with local browser for Germany or Italy it show blank also

http://knottiest.co.uk/