웹개발 Fetch

 

fetch("url입력")   // 기본 요청(GET)

            .then(res => res.json())   // 요청해서 받은 데이터를 JSON화

            .then(data => {                 // JSON화 한 데이터를 다시 data로 이름짓기

                let rows = data['RealtimeCityAir']['row']

                rows.forEach((a) => {

                    // 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기

                    // 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기

                    console.log(a['MSRSTE_NM'], a['IDEX_MVL'])

             })

 })

 

퀴즈1

function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

                let rows = data['RealtimeCityAir']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let gu_name = a['MSRSTE_NM']

                    let gu_mise = a['IDEX_MVL']

                    let temp_html = ``

                    if(gu_mise>40){

                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`

                    }

                    else{

                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`

                    }

                    $('#names-q1').append(temp_html)

                })

            })

        }

 

퀴즈2

function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

                    let temp_html = ``

                    if(bike < 5){

                        temp_html = `<tr class ='red'>

                                         <td>${name}</td>

                                         <td>${rack}</td>

                                         <td>${bike}</td>

                                     </tr>`

                    }

                    else{

                        temp_html = `<tr>

                                         <td>${name}</td>

                                         <td>${rack}</td>

                                         <td>${bike}</td>

                                    </tr>`

                    }

                    $('#names-q1').append(temp_html)

                })

            })

        }

 

 

 

1. $('#아이디').text(변수)

2. fruits.forEach(변수) =>{

    console.log(변수)

}

3. $('#아이디').empty() 

4. $('#아이디').append(변수)

 

2주차 숙제 코드

https://github.com/jongin27/jong_in_s_page.git

GitHub - jongin27/jong_in_s_page