210805 ajax를 이용한 코딩

너무 어렵기때문에 전개 과정을 남겨본다.
ajax를 이용해서 결과값을 openAPI에서 찾아 노출하고 (for 반복문 이용), 특정한 몇몇 결과값은 강조해서 표시하는 과정 (if문 이용 / append를 이용하여 html 코드를 삽입함).

1. openAPI에서 내가 원하는 결과값을 찾는다.
   getStationList - row

<script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    console.log(response)
                    }

                }
            })
        }
    </script>

한줄씩 진행하며 console.log를 이용하여 확인해보는 절차를 가지는 것이 좋다.

2. 결과값이 리스트로 99개 정도 되므로 for반복문을 사용한다.

<script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        console.log(response)
                    }

                }
            })
        }
    </script>

3. 내가 원하는 정보는 API속 stationName / rackTotCnt / parkingBikeTotCnt 이므로 알기쉽게 이름을 지정해주고 name / rack / bike
   console.log로 확인해본다.

function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']
                        console.log(name,rack,bike)
                    }

                }
            })
        }

4. 내가 찾는 정보를 표에 입력하기 위해 표를 구성하는 html 코드를
   let temp = 꺽쇠사이에 에 넣어준다.
   $('#names-q1').append(temp_html) 이 코드를 이용하여 코드를 원하는 위치(id값으로 설정)에 넣어준다 (append 이용)

function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                        let temp_html=`<tr>
                    <td>${name}</td>
                    <td>${rack}</td>
                    <td>${bike}</td>
                </tr>`
                        $('#names-q1').append(temp_html)
                    }

                }
            })
        }

근데 이렇게 하면 버튼을 누를때마다 표가 계속 길어지기 때문에 출력된 표를
지워주는 코드를 삽입한다.(empty)

function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                        let temp_html=`<tr>
                    <td>${name}</td>
                    <td>${rack}</td>
                    <td>${bike}</td>
                </tr>`
                        $('#names-q1').append(temp_html)
                    }

                }
            })
        }

그 뒤 내가 원하는 특정값에 스타일을 지정하고 싶으면
class로 스타일 지정후 if문 사용.

 function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['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)
                    }

                }
            })
        }
    </script>

궁금증

let temp_html = 꺽쇠
는 왜 빈값으로 놔두는 것일까