웹개발 2주차 (2)

어렵네

 

오늘 배운 거

1. 

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

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

            rows.forEach((a) => {

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

            })

        })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

 

2. 

 

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)

                })

            })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

근데 그 전에 이미 있었던 names-q1 의 정보들은 반복문 돌리기 전에 삭제

그리고 반복문 돌리는데 

변수 각각 설정해주고

temp_html에는 빈 곳으로 만들어준다.

그리고 gu_mise가 40보다 넘으면 

출력되는 값들이 빨간색이 되도록 하고 아니면 말고

근데 이것들은 names-q1 의 정보 뒤에 추가되어 온다.

 

3. 

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)              

                })

            })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

근데 그 전에 이미 있었던 names-q1 의 정보들은 반복문 돌리기 전에 삭제

그리고 반복문 돌리는데 

변수 각각 설정해주고

temp_html에는 빈 곳으로 만들어준다.

그리고 2번이랑 똑같이 해석해주면 된다.

 

JQuery는 반복문 돌면서 URL에 있는 데이터들을 다 해주는거임.

 

어려웠던 거

 

1주차 퀴즈는 바로바로 풀었는데 2주차 퀴즈는 바로 못 푼 거 보면 잘 못하는 거 같습니다.

fetch도 한 5번 정도 보니깐 알겠던데..

해석도 저게 다 맞는지도 모르겠고 이거 참..

 

결론

 

열심히 하면 된다!