Post
Ask Question

Get User Details in TypeScript

Introduction

 
In this article, I will explain how to access the current user's details in TypeScript. We can get the IP, country, city, region, latitude, longitude and timezone of the user. The "smart-ip.net" JSON provides all the information about the user.
 
Use the following procedure.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
Give the name of your application as "Get_User_Detail" and then click "Ok."
 
Step 2
 
After this session, the project has been created. A new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and CSS files and the aspx page.
 
 solution-explorer.jpg
 

Program Coding

 
UserDetails.ts
  1. class User_Details {  
  2.  UserInfo(data) {  
  3.   var ip, country, city, region, latitude, longitude, timezone  
  4.   ip = data.host;  
  5.   country = data.countryName;  
  6.   city = data.city;  
  7.   region = data.region;  
  8.   latitude = data.latitude;  
  9.   longitude = data.longitude;  
  10.   timezone = data.timezone;  
  11.   document.getElementById('userip').innerHTML = ip;  
  12.   document.getElementById('city').innerHTML = city;  
  13.   document.getElementById('country').innerHTML = country;  
  14.   document.getElementById('region').innerHTML = region;  
  15.   document.getElementById('timezone').innerHTML = timezone;  
  16.   document.getElementById('longitude').innerHTML = longitude;  
  17.   document.getElementById('latitude').innerHTML = latitude;  
  18.  }  
  19. }  
  20. window.onload = () => {  
  21.  var obj = new User_Details();  
  22.  obj.UserInfo({  
  23.   "source": "smart-ip.net",  
  24.   "host": "192.1.1.254",  
  25.   "lang": "en",  
  26.   "countryName": "India",  
  27.   "countryCode": "IN",  
  28.   "city": "Noida",  
  29.   "region": "Uttar Pradesh",  
  30.   "latitude": "15.40227",  
  31.   "longitude": "48.2222",  
  32.   "timezone": "Asia\/Delhi"  
  33.  });  
  34. };  
default.htm  
  1. < !DOCTYPE html >  
  2.  <  
  3.  html lang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  meta charset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript HTML App < /title>  
  11.  <  
  12.  link rel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  script src = "UserDetails.js" > < /script>  
  17.  <  
  18.  script type = "text/javascript"  
  19. src = "http://smart-ip.net/geoip-json?callback=UserInfo" > < /script>  
  20.  <  
  21.  /head>  
  22.  <  
  23.  body >  
  24.  <  
  25.  div >  
  26.  <  
  27.  table id = "Details"  
  28. cellpadding = "2"  
  29. cellspacing = "2"  
  30. style = " border:1px solid #000; font-family:'Segoe UI';" >  
  31.  <  
  32.  tr style = "background-color:cornflowerblue; color:White; font-weight:bold" >  
  33.  <  
  34.  td colspan = "2"  
  35. align = "center" > Current User Details in TypeScript < /td>  
  36.  <  
  37.  /tr>  
  38.  <  
  39.  tr style = "border:solid 1px #000000" >  
  40.  <  
  41.  td align = "left"  
  42. style = "color:blueviolet" > < b > IP Address: < /b></td >  
  43.  <  
  44.  td > < label id = "userip" / > < /td>  
  45.  <  
  46.  /tr>  
  47.  <  
  48.  tr >  
  49.  <  
  50.  td align = "left" > < b > City: < /b></td >  
  51.  <  
  52.  td > < label id = "city" / > < /td>  
  53.  <  
  54.  /tr>  
  55.  <  
  56.  tr >  
  57.  <  
  58.  td align = "left"  
  59. style = "color:blueviolet" > < b > Country: < /b></td >  
  60.  <  
  61.  td > < label id = "country" / > < /td>  
  62.  <  
  63.  /tr>  
  64.  <  
  65.  tr >  
  66.  <  
  67.  td align = "left" > < b > Region: < /b></td >  
  68.  <  
  69.  td > < label id = "region" / > < /td>  
  70.  <  
  71.  /tr>  
  72.  <  
  73.  tr >  
  74.  <  
  75.  td align = "left"  
  76. style = "color:blueviolet" > < b > Time Zone: < /b></td >  
  77.  <  
  78.  td > < label id = "timezone" / > < /td>  
  79.  <  
  80.  /tr>  
  81.  <  
  82.  tr >  
  83.  <  
  84.  td align = "left" > < b > Longitude: < /b></td >  
  85.  <  
  86.  td > < label id = "longitude" / > < /td>  
  87.  <  
  88.  /tr>  
  89.  <  
  90.  tr >  
  91.  <  
  92.  td align = "left"  
  93. style = "color:blueviolet" > < b > latitude: < /b></td >  
  94.  <  
  95.  td > < label id = "latitude" / > < /td>  
  96.  <  
  97.  /tr>  
  98.  <  
  99.  /table>  
  100.  <  
  101.  /div>  
  102.  <  
  103.  /body>  
  104.  <  
  105.  /html>  
UserDetails.js
  1. var User_Details = (function() {  
  2.  function User_Details() {}  
  3.  User_Details.prototype.UserInfo = function(data) {  
  4.   var ip, country, city, region, latitude, longitude, timezone;  
  5.   ip = data.host;  
  6.   country = data.countryName;  
  7.   city = data.city;  
  8.   region = data.region;  
  9.   latitude = data.latitude;  
  10.   longitude = data.longitude;  
  11.   timezone = data.timezone;  
  12.   document.getElementById('userip').innerHTML = ip;  
  13.   document.getElementById('city').innerHTML = city;  
  14.   document.getElementById('country').innerHTML = country;  
  15.   document.getElementById('region').innerHTML = region;  
  16.   document.getElementById('timezone').innerHTML = timezone;  
  17.   document.getElementById('longitude').innerHTML = longitude;  
  18.   document.getElementById('latitude').innerHTML = latitude;  
  19.  };  
  20.  return User_Details;  
  21. })();  
  22. window.onload = function() {  
  23.  var obj = new User_Details();  
  24.  obj.UserInfo({  
  25.   "source": "smart-ip.net",  
  26.   "host": "192.1.1.254",  
  27.   "lang": "en",  
  28.   "countryName": "India",  
  29.   "countryCode": "IN",  
  30.   "city": "Noida",  
  31.   "region": "Uttar Pradesh",  
  32.   "latitude": "15.40227",  
  33.   "longitude": "48.2222",  
  34.   "timezone": "Asia\/Delhi"  
  35.  });  
  36. };  
Output
 
Output.jpg
 
For more information, download the attached sample application.


Similar Articles