API를 통해 검색된 데이터를 처리합니다.
JSON 데이터
독타입 HTML>
<HTML 랭=“이다”>
<머리>
<메타 문자 집합=“UTF-8”>
<제목>미세먼지 API로 Fetch 연습하고 GO!제목>
<스타일 유형=“텍스트/css”>
div.질문 상자 {
여유: 10px 0 20픽셀 0;
}
스타일>
<스크립트>
기능 q1() {
//console.log(데이터)
허락하다 열 = 데이터(‘리얼타임시티에어’)(‘열’)
열.각각((ㅏ) => {
콘솔.통나무(ㅏ)
})
})
}
스크립트>
머리>
<몸>
<h1>가져오기를 연습해 봅시다!h1>
<시간 />
<사업부 수업=“질문 상자”>
<h2>1. Seoul OpenAPI 이용 (실시간 미세먼지 현황)h2>
<피>모든 지역의 미세먼지를 표시해주세요피>
<피>업데이트 버튼을 누를 때마다 지우고 다시 써야 합니다.피>
<단추 온 클릭=“q1()”>업데이트단추>
<울 ID=“이름-q1”>
<리>중구: 82리>
<리>종로구 : 87리>
<리>용산구: 84리>
<리>은평구 : 82리>
울>
사업부>
몸>
HTML>
브라우저에서 버튼을 눌러 데이터를 불러오면 값이 잘 들어오는 것을 볼 수 있습니다.
들어오는 json 데이터에서 지역명과 미세먼지 값을 키 값으로 가져와서 출력합니다.
<스크립트>
기능 q1() {
//console.log(데이터)
허락하다 열 = 데이터(‘리얼타임시티에어’)(‘열’)
열.각각((ㅏ) => {
허락하다 gu_name = ㅏ(‘MSRSTE_NM’)
허락하다 나에게 = ㅏ(‘IDEX_MVL’)
콘솔.통나무(gu_name,나에게 )
})
})
}
스크립트>
브라우저에서 그리기
가져온 데이터로 브라우저에서 요소를 만듭니다.
<스크립트>
기능 q1() {
허락하다 열 = 데이터(‘리얼타임시티에어’)(‘열’)
$(‘#이름-q1’).비어 있는()
열.각각((ㅏ) => {
허락하다 gu_name = ㅏ(‘MSRSTE_NM’)
허락하다 나에게 = ㅏ(‘IDEX_MVL’)
허락하다 temp_html = `
${gu_name} : ${나에게}
`
$(‘#이름-q1’).추가(temp_html)
})
})
}
스크립트>
루프 문으로 목록을 순회하면서 키로 값을 가져와서 li 요소를 만들고 값을 삽입합니다.
루프가 시작되기 전에 기존 내용을 지웁니다.
이제 미세먼지 값이 40 이상인 요소는 빨간색으로 변경됩니다.
<스크립트>
기능 q1() {
//console.log(데이터)
허락하다 열 = 데이터(‘리얼타임시티에어’)(‘열’)
$(‘#이름-q1’).비어 있는()
열.각각((ㅏ) => {
허락하다 gu_name = ㅏ(‘MSRSTE_NM’)
허락하다 나에게 = ㅏ(‘IDEX_MVL’)
//console.log(gu_name,gu_mise )
// let temp_html = `
중구: 82
`
허락하다 temp_html = “;
만약에 (나에게 > 40)
{
temp_html = `
${gu_name} : ${나에게}
`
}
또 다른{
temp_html = `
${gu_name} : ${나에게}
`
}
$(‘#이름-q1’).추가(temp_html)
})
})
}
스크립트>
temp_html 값은 분기되어 루프의 조건문을 통해 삽입됩니다.
