[TIL] Ajax / Open API 기본 사용법

서민지·2021년 8월 20일
0

Ajax 코드로 open API 연동하기

✅ Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

리마인드)

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },


Example01

리스트&딕셔너리s


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

위 주소 API 내용은 아래와 같다.

{"RealtimeCityAir":{"list_total_count":25,"RESULT":{"CODE":"INFO-000","MESSAGE":"정상 처리되었습니다"},"row":[{"MSRDT":"202108201600","MSRRGN_NM":"도심권","MSRSTE_NM":"중구","PM10":18.0,"PM25":14.0,"O3":0.058,"NO2":0.02,"CO":0.4,"SO2":0.003,"IDEX_NM":"보통","IDEX_MVL":74.0,"ARPLT_MAIN":"O3"},{"MSRDT":"202108201600","MSRRGN_NM":"도심권","MSRSTE_NM":"종로구","PM10":18.0,"PM25":14.0,"O3":0.069,"NO2":0.012,"CO":0.4,"SO2":0.003,"IDEX_NM":"보통","IDEX_MVL":83.0,"ARPLT_MAIN":"O3"},........이하 생략

뭔가 붸리 복잡쓰 해보이지만 차근히 보자면, 제일 처음 보이는 "RealtimeCityAir"와 뭔가 정상적으로 처리가 되었구나 하는 것을 알겠고 이후에 보이는 "row" 가 갖고있는 []!!! [리스트가 보일것이다~]

[리스트 안에 {중괄호로 이렇게 하나의 딕셔너리로 묶여있구나~ 하는 것을 알고 난 후에!}]
우리가 뽑아내고자 하는 데이터 코드만 갖고오면 된다.

((뭔가 이차 배열처럼 보이지 않는가?! 나는 이걸 이차배열 형식이라고 대강 넘겨짚고, 그렇기 때문에 response[][]이런 형식으로 갖고오게끔 코드가 정해진게 아닌가~ 하고 생각하고 넘어감 ))

아래 예제에서 사용 할 데이터

  • API 이름: RealtimeCityAir
  • API 구조: {"RealtimeCityAir":{,"row":[]}} Type
  • 지역이름: MSRSTE_NM
  • 미세먼지 농도 : IDEX_MVL

위 자료로 만들어 낸 AJAX 코드는

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

Example02

리스트&딕셔너리1개

API 주소: https://api.thecatapi.com/v1/images/search

위 주소 API 내용은 아래와 같다.

[{"breeds":[],"id":"-n_U0851p","url":"https://cdn2.thecatapi.com/images/-n_U0851p.jpg","width":500,"height":331}]

Example01과 다르게 이번 데이터는 리스트와 딕셔너리 1개로 이루어진것을 확인 할 수 있다.
딕셔너리가 1개니까 for문 돌릴 필요 없이 response[0]으로 해당 데이터를 확인 해 볼 수 있다. 딕셔너리는 1개지만 그래도 리스트로 묶여있기 때문에 respons[0]['url'] []2개를 붙여서 첫번째 딕셔너리에있는 url 데이터를 불러온다.

위 내용을 토대로 만들어 낸 AJAX 코드는

 $.ajax({
 	type: "GET",
    	url: "https://api.thecatapi.com/v1/images/search",
        data: {},
        success: function(response){
            console.log(response[0]['url']);
            }
        })

Example03

딕셔너리 only


API 주소: http://spartacodingclub.shop/sparta_api/rate

위 주소 API 내용은 아래와 같다.

{"date":"2021\ub144 08\uc6d4 20\uc77c","rate":1182.13}

Example01, Example02 와 다르게 이번 데이터는 리스트[]가 아닌 딕셔너리{} 1개로 이루어진것을 확인 할 수 있다.

((이번에는 그냥 일차배열같은 느낌이지 않는가!! 그러니까 그냥 response[ ] 이렇ㄱ0ㅔ..ㅎㅎ라고 이해하고 넘어감))

위 내용을 토대로 만들어 낸 AJAX 코드는

 $.ajax({
 	type: "GET",
    	url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function(response){
        	let rate=response['rate'];
            console.log(response['rate']);
                }
       })
profile
Do what I want for no regret

0개의 댓글