IP Fast API Background

Recently I have been diving into the world of APIs and slowly understanding more and more about them. The most recent API I have been looking at is IP Fast API! This API focuses on taking an IP and then gathering data such as city, country, or region from it.

We are able to use that data through the fetch() function nested within an update() function.

Below is the code I currently have that shows all the information gathered from the IP

  async updateUserIP() {
    return fetch(this.ipLookUp)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        this.ip = data.ip;
        this.city = `${data.city}`;
        this.state = `${data.region_name}`;
        this.country = `${data.country}`;
        this.location = `${data.city}, ${data.country}`;
        return data;
      });
  }

Breaking Down the Code

Now you may look at that and not process what all that code means right away but if you look at it step by step you can see that it is fairly simple!

The initial fetch() and .then() sets it up so that if it successfully grabs an IP through the API it will then allow for us to use the json data.

From there, the following .then() shows the use of how we manipulate that data provided. In this case it was broken up by city, state, country and finally a location which brings it all together.

Even now I am troubleshooting with manipulating the data as it picks and chooses when it will work and be undefined (but alas we must continue onwards).

Latitude and Longitude together in an API

Another API I am using currently is FreeGeoIP API. This API determines the latitude and longitude of your location. What we are able to do is use the data from FreeGeoIP and connect it to IP Fast API to create a fun little API marriage.

Disclaimer, my code hates me currently so the marriage is crumbling :[

Anywho! Combining the two will allow for the json data from before to be intertwined with geo location data.

Even though I am struggling to get this to work, here is the combination between the two which I have currently (and is subject to be changed)

  async getGEOIPData() {
    const IPClass = new UserIP();
    const userIPData = await IPClass.updateUserIP();
    return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.latitude = data.latitude;
        this.longitude = data.longitude;
        this.state = data.region_name;
        this.city = data.city;
        this.location = `${this.city}, ${this.state}`;

        console.log(`${this.latitude} ${this.longitude}`);
        console.log(`Your Location: ${this.location}`);

        return data;

What does it mean??

Essentially this jumble of code SHOULD be pulling the location from FreeGeoIP's API while also gathering the data from IP Fast's API and then outputting it all later in the render() function... but mine doesn't ¯\_ (ツ)_/¯

Follow Along!

If this peeked your interest, or you just want to see if I am ever able to get out of what I like to call ~undefined hell~ then you can look at my test GitHub Repo!

And if you just want to see a sparkly repo that actually works, you can check out my groups GitHub Repo!