@sakurako1011 (bee)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavascriptにてAPIで取得したデータの表示ができない

解決したいこと

条件にあったものだけ表示したいのに全件表示してしまう

JavascriptにてAPIでデータを取得し、
中の配列のtitleの部分を表示するプログラムを作っています。

Windowには『全件』、『未完了』、『完了』という3つのセレクタがあり、その中で1つを選び、隣に用意しているボタンを押して選択、
全件の場合は200件の全件titleをappendcildeで生成したli要素に入れて表示。
未完了の場合はconmtedがfalseのtitleのみ
完了の場合は逆にtrueのtitleのみを表示したいです。

ですが今のコードだと全件と未完了は表示されますが
完了だけ何も表示されません。

結構悩んでたのですがまだ初心者なもので問題点に気づくことができず、、

プラスで言うとボタンを押した分だけliが増えてしまっていて、
上記で記載した通り、完了未完了はliとして表示はされますが、下に連なって表示されている状態です。。。
このリストの初期化??と言うのはどこに何を入力するべきなのでしょうか、、
皆様何卒解決方法を教えていただけないでしょうか。

発生している問題・エラー

エラーは出ていません

該当するソースコード

ソースコードを入力
Javascript

 <select name="select" id="select">
                <option value="">全件</option>
                <option value="0">未完了</option>
                <option value="1">完了</option>
            </select>
            <button type="submit" id="submit">Email表示</button>
        </form>
        <!-- ここにリスト表示 -->
        <ul id="list">
        </ul>
    </div><!-- wrapper -->

    <script>
        const submit = document.querySelector("#submit");
        const lists = document.querySelector("#list");
        

        submit.addEventListener("click", async function () {
            event.preventDefault();
            const response = await fetch("https://jsonplaceholder.typicode.com/todos");
            const users = await response.json();

            users.forEach(function (user) {
                if (document.querySelector("#select")) {
                    id = document.querySelector("#select").value;
                    //全件
                    if (id == "") {
                        const list = document.createElement("li");
                        list.innerText = user.title;
                        lists.appendChild(list);
                        //未完了
                    } else if (id == "0") {
                        if (user.completed === false) {
                            const list = document.createElement("li");
                            list.innerText = user.title;
                            lists.appendChild(list);
                            //完了
                    } else if (id == "1") {
                        if (user.completed === true) {
                            const list = document.createElement("li");
                            list.innerText = user.title;
                            lists.appendChild(list);
                    }}};
                };

            });
        });


        
    </script>

自分で試したこと

if文の中にforEachを入れてみたのですが、機能していない?のか使い方が間違っているのか機能していないみたいです

0 likes

2Answer

Comments

  1. @sakurako1011

    Questioner

    回答ありがとうございます!
    初歩的なところで間違えてましたね。。。
    ちゃんと表示されるようになりました。
    ありがとうございます!

このコードが参考になると幸いです。

    <script>
        const submit = document.querySelector("#submit");
        const lists = document.querySelector("#list");
        

        submit.addEventListener("click", async function () {
            event.preventDefault();
            const response = await fetch("https://jsonplaceholder.typicode.com/todos");
            const users = await response.json();

            // 前の「li」リストを削除
            lists.innerHTML = "" ;

            users.forEach(function (user) {
                if (document.querySelector("#select")) {
                    id = document.querySelector("#select").value;
                    
                    //全件
                    if (id === "") {
                        const list = document.createElement("li");
                        list.innerText = user.title;
                        lists.appendChild(list);
                    } else if (id === "0") {
                        if (user.completed === false) {
                            const list = document.createElement("li");
                            list.innerText = user.title;
                            lists.appendChild(list);
                        }
                    } else if (id === "1") {
                        if (user.completed === true) {
                            const list = document.createElement("li");
                            list.innerText = user.title;
                            lists.appendChild(list);
                        }
                    }
                }
            });
        });
    </script>
1Like

Your answer might help someone💌