Week 2.2 — Spot and Display

Learning to Import Data from OpenAPI’s with Ajax

Ajax is a set of web development techniques using many web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.

Therefore, in order to make efficient use of Ajax, it is important to understand how the server-client system works in the language of JSON.

Understanding the Server-Client Communication

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute-value pairs and arrays. There are two purposes by which a client makes a request to the server:

• GET: making a request for data to be read (ex. importing a list of movie seats available on a website or an app)
• POST: “Conventionally” making a request for data creation, update, or deletion (ex. creating or deleting an account and changing passwords)

Our goal today is to examine the former. The latter shall be covered once we have covered Python (next week)!

Starting with Ajax

It is important to make sure that jQuery has already been imported to the page you are about to operate Ajax on. Else, you’ll see the following message:

Uncaught TypeError: $.ajax is not a function

Now, in order to understand the fundamental structure of Ajax, let us examine this OpenAPI retrieved from the city of Seoul that shows real-time statistics of fine dust within the city (per district).

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

It is also important that you have the following Chrome extension downloaded before entering the link; it will arrange the data according to the form of JSON.

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en

JSON, on the most fundamental level, consists of Key:Value, which makes it very analogous to a dictionary. In the case of the example imported and displayed, there is a dictionary-style value within the key named “RealtimeCityAir” and a list-style value within the key named “row.”

How would we make use of these data sets? We use the following Ajax function code to manipulate the dictionaries and lists.

$.ajax({   
  type: "GET",   
  url: "enter the URL to the API",   
  data: {},   
  success: function(response){     
    console.log(response)   
  } 
})

An interpretation of this code is provided below.

$.ajax({   
  type: "GET", // request through the GET method
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a     
        4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // data to be provided along with the requested (POST)
  success: function(response){ // "response" containes the received 
    console.log(response) // write down codes using the received^
  } 
})

Let us import the values of MSRSTE_NM (district name) and IDEX_MVL (fine dust concentration level) for the Dobong district of Seoul and display them on the developer’s tool:

$.ajax({   
  type: "GET",   
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a     
        4b4b5872/json/RealtimeCityAir/1/99",   
  data: {},   
  success: function(response){   
    // specify the data group desired
    let dobong = response["RealtimeCityAir"]["row"][11];   
    let gu_name = dobong['MSRSTE_NM'];   
    let gu_mise = dobong['IDEX_MVL'];   
    console.log(gu_name, gu_mise);   
  } 
})

This yields the following:

도봉구 74

Now, let’s try synthesizing a list showing fine dust concentration per district:

$.ajax({   
  type: "GET",   
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a     
        4b4b5872/json/RealtimeCityAir/1/99",   
  data: {},   
  success: function(response){   
    let mise_list = response["RealtimeCityAir"]["row'];                      
    for (let i = 0; i < mise_list.length; i++) {                         
      let mise = mise_list[i];
      let gu_name = mise['MSRSTE_NM'];   
      let gu_mise = mise['IDEX_MVL'];   
      console.log(gu_name, gu_mise);   
  } 
})

This yields the following:

중구 76
종로구 88
용산구 81
은평구 91
서대문구 -99
마포구 78
광진구 89
성동구 86
중랑구 82
동대문구 85
성북구 79
도봉구 74
강북구 79
노원구 76
강서구 81
구로구 73
영등포구 79
동작구 66
관악구 76
금천구 66
양천구 76
강남구 81
서초구 73
송파구 86
강동구 76

Using this data importing technique, I enhanced the “My Shopping Mall” website by adding an element that shows the USD-to-KRW exchange rate. Find the following post:

Short-Term Project — My Shopping Mall

Well, I think that should be it. Next week, I will come back with more exciting concepts, including Python and data crawling! See you then :D

Fin.