Using The Javascript Fetch API To Get Data

Today, I'm going to walk you through how to wire up some data up to a Wikipedia-query tag so that when your IP address changes, your location will change, and so will the Wikipedia article.

You will see something like this.

Getting Started

For this lab we utilize GeoIP to retrieve our lat, long, city, and state. Here's how our constructor looks.

  constructor() {
    super();
    this.locationEndpoint = 'https://freegeoip.app/json/';
    this.long = null;
    this.lat = null;
    this.city = null;
    this.state = null;
  }

Next, we set the properties that we later use to populate our data. Here we return our lat and long as integers and our city and state as strings.

  static get properties() {
    return {
      long: { type: Number },
      lat: { type: Number },
      city: { type: String },
      state: { type: String },
    };
  }

Fetching the data

Before fetching the data from our API, let's talk about what fetch is. Fetch API is an interface that allows you to make HTTP requests to servers from web browsers. We utilize the fetch to retrieve our location based on our IP address in this lab. See how we utilize fetch in our lab.

  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.long = data.longitude;
        this.lat = data.latitude;
        this.city = data.city;
        this.state = data.region_name;

        return data;
      });
  }

In this code block, using the URL we set to locationEndpoint we were able to fetch our location based on our IP address. We used fetch to make an HTTP request to the server holding the API, then if the response was "ok," we will return the API call as a JSON. Here's what the API response should look like.

{
"ip": "102.16.28.100",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16802",
"time_zone": "America/New_York",
"latitude": 40,
"longitude": -77,
"metro_code": 574
}

We then set our properties lat, long, city, and state to the variables the API returns to access the data. In this case, we only need the latitude, longitude, city, and region_name, which means the state you are in.

Render()

render() {
    // this function runs every time a properties() declared variable changes
    // this means you can make new variables and then bind them this way if you like
    const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`<iframe title="Where you are" src="${url}"></iframe>
      <br />
      <link href="https://www.google.com/maps/@${this.lat},${this.long},14z" />
      <wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
      <wikipedia-query search="${this.city}"></wikipedia-query>
      <wikipedia-query search="${this.state}"></wikipedia-query> `;
  }

This method is invoked on each update to perform rendering tasks. This method returns any value renderable by lit-HTML's elements. We pass the lat and long properties to get the Iframe working. Whenever these properties are changed, lit render the information and updates. Here's the results.

.

Wiring the wikipedia tags

In order to get the wikipedia tag working we first must the following.

1. Create an HTML link that sits below the iframe that links to the location on google maps.

2. Pass the lat, and long properties.

3. Next run npm install @lrnwebcomponents/wikipedia-query

4. In order to use the we must import the tag at the top of your file to use it import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js;'


5. Next, in our render function add in the wikipedia tags. Wikipedia's API is documented here

6. The search property takes${this.city}, ${this.state} and the comma then a space to ensure the tags work properly.

After following the steps above your results should look like this.

Based on your location the Wikipedia tag will display information of your state and city.

Now you have successfully fetch an API to wire Wikipedia tags. Way to go!

To view the complete project click here.

Resources

1. Wikipedia-query

2. GeoIP

3. Fetch API