1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기
- 조건
: 업데이트 버튼을 누를 때마다 지웠다 새로 쓰여져야 한다.
: 모든 구와 구의 미세먼지를 표기해준다.
1-1. 실수와 깨달은 점 review
-
제이쿼리에 html 추가는 넣을 html 의 유형을 선언하고 jqappend 를 활용해 추가하지만 기존에 보이는 html을 초기화, 지우려면 어떻게 할까? 저번 복습을 통해 알고 있었지만 구글 검색을 잘해야 한다는 것을 느끼게 해 주었다. 그것은 jqempty.
-
jqajax 로 데이터 불러올 오픈 api url을 넣어주고 data는 따로 넘겨주는 것이 없어 {}, 이렇게 표시해주고, 그 밑의 부분은 삭제했다.
-
불러오기가 성공했는지 console.log(response);를 통해 알아보아야 한다. 가져오는 정보는 key와 value로 이루어져 있는 dictionary 이다. 여기서 리얼타임시티에어 라는 키값을 가져오고 그 안의 row 라는 키값은 배열로 이루어져 있고 그 안에 여러 딕셔너리들이 들어 있다. 그 여러 딕셔너리 중에 구 이름과 미세먼지 수치의 키를 가져와서 원하는 정보를 얻으려 한다.
- 코드 확인
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
// console.log(response['RealtimeCityAir']['row']);
let miseinfo = response['RealtimeCityAir']['row'];
for (i = 0; i < miseinfo.length; i++) {
// console.log(miseinfo[i]);
let guName = miseinfo[i]['MSRSTE_NM'];
let guMise = miseinfo[i]['IDEX_MVL'];
// console.log(guName, guMise);
let temp_html = '<li>' + guName + ' : ' + guMise + '</li>'
$('#names-q1').append(temp_html);
}
}
});-
리얼타임시티에어의 로우값을 알아내기위해 miseinfo 라는 변수명으로 선언했다. 콘솔로그는 찍었는데 선언하는 데에서 버벅였다.
-
보다시피 row 값은 [{},{},{},{}........] 배열로 이루어져 있다. 배열이면 0번째부터 n번째 까지 돌면서 원하는 키값을 뽑아와야 한다. 그럴땐 뭘 쓰나? 반복문을 쓴다!
for 문 공식이잖아 이제? for (i = 0; i < miseinfo.length; i++) {} -
가져온 row 값 중에서 구이름과 미세먼지값 반복문 내에 선언하기
miseinfo의 i 번째의 ['구이름'], miseinfo의 i 번째의 ['미세먼지수치'] 이렇게 선언을 해주고 콘솔로그를 찍어본다.
여기서 선언해준 뒤, 나의 실수는 console.log('guName','guMise'); 이렇게 찍었다는 것이다.
이미 선언한 변수는 따옴표로 하면 문자열로 되는 것이기에 원하는 정보를 출력할 수 없다!. 따옴표 빼고 입력할 것! -
음 출력되는 것을 확인했으니까 이제 이 정보를 기존 html에 추가를 해주자.
추가해주는 jq는 무엇? jqappend 이다. 하지만 그 전에 어떤 html 모양을 추가 해주는지 선언을 해 주어야 한다.
let temp_html = '< li>' + guName + ' : ' + guMise + '< /li>'
그리고,
$('#names-q1').append(temp_html);
로 html형태를 추가 해 준다. 그럼 업데이트 버튼을 누를 때마다 새로고침 되면서 정보가 표시될 것이다.
1-2. 느낀 점
- 그냥 무조건 많이 해보는 것이 장떙이다.
