[スパルタコードクラブ]ネットワーク開発総合クラス-2週間(3)

練習2-10 Quiz Ajax(1)

OpenAPIの使用(リアルタイムデータ表示)

1-1.大陵の現状を示す

正解

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 cnt = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

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

私のコード

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 cnt = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']
                    
                  ❌❌❌ let temp_html=`<td>${name}${cnt}${bike}</td>`❌❌❌
                    }
                    $('#names-q1').append(temp_html)
                }        
            })
        }

❌ let temp_html
前に解いたスモッグ指数問答法をそのまま問題に適用した問題ですが、それを見てそのコード通りに書くと間違います.(私は理解が早いですが、あまり適用されません)

スモッグ

	<ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>       

茶陵街

<tbody id="names-q1">
                <tr>
                    <td>102. 망원역 1번출구 앞</td>
                    <td>22</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>103. 망원역 2번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>104. 합정역 1번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
            </tbody>

スモッグはnames−q 1内にliの1つのコードしかないが,darlingはtr内にtdがある二重構造を無視した.

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

そのため、スモッグはtemt htmlにliコードを1つだけ書くことができますが、tr、tdをすべて書く必要があります.愚かな私は出力の内容がtdの中にあると思っていたので、liとtdはすぐに対応してくれます…^^
もう一つ.
names-q 1に書かれている内容を削除すべきだったが、また見逃してしまった.

1-2.条件文の適用

正解

<sytle>
        .urgent {
            color: red;
            font-weight: bold;
        }
</style>

<script>
        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 rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 5) {
                            temp_html = `<tr class="urgent">
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        } else {
                            temp_html = `<tr>
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

</head>

<body>
    <h1>jQuery+Ajax의 조합을 연습하자!</h1>

    <hr />

    <div class="question-box">

私のコード

<style>
.good {
            color: blue;
            font-weight: bold;
        }

        .bad {
            color: red;    
            font-weight: bold;
        }
</style>

<script>
        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 cnt = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                    let temp_html =``
                        if (bike > 10) {
                            temp_html = `<tr class="good">
                    <td>${name}</td>
                    <td>${cnt}</td> 
                    <td>${bike}</td>
                </tr>`
                        } else if (bike < 3) {
                            temp_html = `<tr class="bad">
                    <td>${name}</td>
                    <td>${cnt}</td> 
                    <td>${bike}</td>
                </tr>` 
                        } else {
                            temp_html = `<tr>
                    <td>${name}</td>
                    <td>${cnt}</td> 
                    <td>${bike}</td>
                </tr>`
                        }
                $('#names-q1').append(temp_html)
                }
            }
        })
    }
    </script>

今回は間違いないやっと応用に成功した.
以前の授業で習った条件文では,elseifを用いて10より大きいと青,3より小さいと赤と記述した.
を実行し、このように出力する😎
練習2-10 Quiz Ajax(1)

ランダム猫写真APIの使用

正解

function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    let imgurl = response[0]['url']
                    $('#img-cat').attr('src',imgurl)
                }
            })
        }

私のコード

function q1() {
        $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    ❌❌❌ let url = response['url'][0] ❌❌❌
                }
               ❌❌❌ $("#img-cat").attr("src","url") ❌❌❌
        })
      }

❌ let url
今、変数を使用するべき状況は確かに知っていますが、変数のタイプが変更されると、呼び出し方法を適用することはできません.ここでlet imgurl=response[0][url]を書き込む前にsuccess:function(response)の後にconsoleがあります.log(response)を使うべきです.

[{…}]
 0:
   breeds: []
   height: 276
   id: "vxMLPUGso"
   url: "https://cdn2.thecatapi.com/images/vxMLPUGso.png"
   width: 388
 __proto__: Object
 length: 1
 __proto__: Array(0)

開発者ツールで検証することで、[0][url]というURLパスを特定できます.私はただ順番を変えて書いただけで、それも発見されました.何を知って書いたのか分からない.
100$("#id値").attr(src,変数値):jQueryを使用して画像のsrcを変更する
一見正しいように見えますが、引用符も間違っていて、コードも}の中にあります.なんといっても、うまくいかないと、こんなミスが90%を超えてしまいます…^^
ミンギョンのMixte歌词を思い出す最近...时には自分が天才だと思って、时には自分が才能がないと思っています^^...自分が天才だとは思わなかったので、落とし穴はよく教えられていると思いますが、寄付が変形すると、渋滞して暗くなります・・・IT業界に従事している友達は私がよく開発すると言っていますが、そうではないようです.友達......友达は私がパソコン、ロボット、AIのように、私も機械のように考えることができると思っています...人間だったことが証明されましたね…^^これらのコードがどのようなメカニズムで働いているのか理解しようとしないでください.最初の週から、私はほとんどの授業で私に暗記させる話を聞いていますが、私にはできません.INTP特ですか?最初は私という人は原理を身につけてこそ理解できるので、無条件に暗記することはできません.いいえ、もしあなたが英語の単語のように理由もなく暗記すればいいなら、これは簡単な問題ですが、理解が必要な分野では、機械論を知りたいです.私は気が狂いそうです.ああ...難しいですね...どうしてそうするのか分からないが、盲目的に暗記するよりも、私はトルキンのように直接言語を創造したほうがましで、頭が砕けないようだ.