fetch / forEach / $('#id').append(temp_html)

✅브라우저 개발자도구(오른쪽 클릭→검사)에서 console탭에서 확인

<script>

        function q1() {

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

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

                rows.forEach((a) => {

                    let gu_name = a['MSRSTE_NM']

                    let gu_mise = a['IDEX_MVL']

                    console.log(gu_name,gu_mise)

                })

            })

        }

    </script>

✅ 웹에 붙일 temp_html을 만들기

<script>

        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 = `<li>${gu_name} : ${gu_mise}</li>`

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

                })

            })

        }

    </script>

<script>

        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)

                })

            })

        }

    </script>

let temp_html = `` 만들어 조건문을 붙여줌