全件表示しているものの中からAPIを通して条件に合致しているものだけを表示させる

実現したいこと

APIにてTODOデータを取得しulタグにリスト表示させます・
selectで全件が選択されているとTODOデータのtitleの値が表示され、
selectで未完了が選択されるとTODOデータのcompletedがfalseの値だけを表示
selectで完了が選択されるとTODOデータのcompletedがtrueの値だけを表示するという内容が完成系です。

前提

全建表示までは今のままで完成しているのですが、
未完了、完了の場合が実装できずにつまずいています、

発生している問題・エラーメッセージ

APIを取得し、全件表示はできたものの、未完了、完了を選択した場合の取得がうまくいかず、
エラーすら出ないコードになってしまいます。
完成系での目標はサブミットを使って親要素、子要素の追加、削除をして表示を更新したいのですが、
ネット記事を見てもイマイチ書き方が合っていないようで、、

エラーメッセージ
意味をなしていないコードのせいかエラーすら出ません

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson06 検索フォーム</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div id="wrapper"> <form id="sampleForm" method="post" action=""> Completed: <select name="select"> <option value="">全件</option> <option value="0">未完了</option> <option value="1">完了</option> </select> <button type="submit" id="submit" onclick="getData()">Email表示</button> </form>  <ul id="list"> <li></li> </ul> </div>

<script>
    const ul = document.querySelector('ul');
    document.querySelector('button').addEventListener('click', function () {
        // 子要素を全て削除
         });


  
    async function getData() {
        event.preventDefault();
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        const data = await response.json();
        data.forEach(e=>list.appendChild(Object.assign(document.createElement('li'),{textContent:e.title})));
    }
</script>

</body> </html>

JavaScript

試したこと

while文で子要素を全て削除するようなものを書いてみましたが、
このページは動作していませんと出てしまい断念

補足情報（FW/ツールのバージョンなど）

cssはこのように記入しています

#sampleForm {
margin: 20px 0 0 20px;
}

#box {
margin: 20px 0 0 20px;
width: 320px;
height: 180px;
background-color: #fdd;
}
#list li {
list-style-type: disc;
margin-left: 40px;
}

.error {
font-size: 12px;
color: #f00;
display: none;
}

Lhankor_Mhy

2023/10/18 02:58

似たような質問を最近見かけますね。 https://teratail.com/questions/2krz44giqt60mz https://teratail.com/questions/e0rxnaf209n5u5

myunhen0301

2023/10/18 07:49

同じ課題をこなしている方なのでしょうか、、こちらも参考に考えを改めてみますありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

こういうことでしょうか？

javascript
1window.addEventListener('DOMContentLoaded', async()=>{
2  const data=await fetch('https://jsonplaceholder.typicode.com/todos').then(res=>res.json());
3  //全件
4  const data_all=data.map(x=>x.title);
5  console.log(data_all);
6  //未完了
7  const data_uncompleted=data.filter(x=>!x.completed).map(x=>x.title);
8  console.log(data_uncompleted);
9  //完了
10  const data_completed=data.filter(x=>x.completed).map(x=>x.title);
11  console.log(data_completed);
12});

投稿2023/10/18 02:55

yambejp

総合スコア117963

myunhen0301

2023/10/18 06:00

回答ありがとうございます。 consoleに分けられて表示することができました！ただ表示をコンソールではなく画面内に表示しようとしてコードにappendChildを追加してみたのですが、よくわからないコードになってしまいました。。またコードが煮詰まってしまったら質問をあげてみます。。

行動規範の内容に同意します

document.querySelector('select').value で選択中の <option> の値を取得することができます。
data.forEach(...) の中で上記の値と e.completed を組み合わせて list.appendChild() するかどうかを判断するといいのではないでしょうか。

投稿2023/10/18 03:24

int32_t

総合スコア21933

myunhen0301

2023/10/18 06:06

TODOデータの完成、未完成の内容は取得できましたが、これを画面に表示する段階で今つまずいてしまっています、、、 list.appendChild()を使用してみたのですが、何も動かない状態になってしまいました、、、どう書き方改善するのが正しいのでしょうか、、 data.forEach(function (user) { if (document.getElementById("select")) { id = document.getElementById("select").value; if (id == "") { const list = document.createElement("li"); list.innerText = user.title; lists.appendChild(list); } else if (id == "0") { if(data.completed===false){ const list = document.createElement("li"); list.innerText = user.title; lists.appendChild(list); } } else if (id == "1") { if(data.completed===true){ const list = document.createElement("li"); list.innerText = user.title; lists.appendChild(list); }; }; }; });

int32_t

2023/10/18 07:36 編集

この質問は解決済みなのでは? まだ解決してないならベストアンサーをセットすべきではないと思います。 * document.querySelector と回答に書いたのに document.getElementById している * forEach に指定している関数の引数が e だったが、それを user にしたいのか data にしたいのか曖昧

行動規範の内容に同意します

あなたの回答