javascript　jsonデータ　リスト表示

###実現したいこと
お世話になります。
最近javascript勉強始めました。
初めて質問させていただきます。
よろしくお願いします。

・javascriptを使用して、JSONデータを取得。
・JSONデータの配列のtitle部分をリスト表示
・「全件」をクリックしたら、全てのリストが表示
・「未完了」をクリックしたら、completedが「false」になっているもののみを表示
・「完了」をクリックしたら、completedが「true」になっているもののみを表示

このような振る舞いをしたいのですが、
全件をリスト表示することができなくて作業が止まってしまっております。

前提

javascriptでJSONデータを取得できました。
その取得したデータのtitleに記入されている部分をボタンをクリックすると、
添付画像のように全件リスト表示させたいです。

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

JSONデータの取得をして、
ボタンを押すとtitleに記載している文字が表示されるところまでいきましたが、
一気に表示されてしまいます。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <title>lesson06 検索フォーム</title>
7    <link rel="stylesheet" type="text/css" href="base.css">
8</head>
9
10<body>
11    <div id="wrapper">
12        <form id="sampleForm" method="post" action=""
13        name="sampleForm" onsubmit="return submitStr()">
14            Completed:
15            <select name="select" id="select">
16                <option value="">全件</option>
17                <option value="0">未完了</option>
18                <option value="1">完了</option>
19            </select>
20            <button type="submit" id="submit">Todo表示</button>
21        </form>
22        <!-- ここにリスト表示 -->
23        <ul id="list">
24        </ul>
25    </div><!-- wrapper -->
26
27    <script>
28        const element = document.getElementById('list');
29        let li = document.createElement('li');
30
31        async function getData() {
32            try {
33                const response = await fetch('https://jsonplaceholder.typicode.com/todos');
34                const data = await response.json();
35                console.log(data);
36                let titles = data.map(item => item.title);
37                li.textContent = titles;
38                    element.appendChild(li);
39            } catch (error) {
40                console.log('エラーが発生しました', error);
41            }
42        }
43
44        let myForm = document.forms['sampleForm'];
45        const btn = document.getElementById('submit');
46
47        btn.addEventListener('submit', submitStr);
48        function submitStr(){
49            event.preventDefault();
50            let submitStr = document.forms.sampleForm.select.value;
51            console.log(submitStr);
52            if(submitStr == ''){
53                getData();
54                }
55            }
56
57
58    </script>
59</body>
60
61</html>

css
1@charset "UTF-8";
2/* reset */
3body, h1, h2, h3, h4, h5, h6, p, address,
4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
5    margin: 0;
6    padding: 0;
7    border: none;
8    font-style: normal;
9    font-weight: normal;
10    font-size: 100%;
11    text-align: left;
12    list-style-type: none;
13    border-collapse: collapse;
14}
15
16textarea { font-size: 100%; vertical-align:middle;}
17img { border-style: none; display: block; }
18hr { display: none; }
19em{font-style: normal}
20input{line-height:auto;vertical-align:middle;}
21strong.more{color:#c30}
22a{text-decoration: none;}
23
24html {
25
26}
27
28body {
29    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
30}
31
32* {
33    -webkit-box-sizing: border-box;
34    -moz-box-sizing: border-box;
35    -o-box-sizing: border-box;
36    -ms-box-sizing: border-box;
37    box-sizing: border-box;
38}
39
40/* 上の部分は気にせずここから書く */
41#sampleForm {
42    margin: 20px 0 0 20px;
43}
44
45#box {
46    margin: 20px 0 0 20px;
47    width: 320px;
48    height: 180px;
49    background-color: #fdd;
50}
51#list li {
52    list-style-type: disc;
53    margin-left: 40px;
54}
55
56.error {
57    font-size: 12px;
58    color: #f00;
59    /* display: none; */
60}
61

試した内容

３7,38行目を削除して、下記for文を入れてみましたが、
エラーは出ていないものの、リスト表示されませんでした。
for (let i = 0; i < titles.lenght; i++) {
li.textContent = titles[i];
element.appendChild(li);
}

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

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

回答1件

ベストアンサー

添付画像のように全件リスト表示させたいです。

全件をリスト表示させる点だけに言及します。（全件リスト表示の先の、切替動作まで含めて全部示すことはできますが、その部分はまず自分で考えてみて下さい）
scriptタグの前半を下記のように直してください。（わかりやすいように冗長な書き方のままにしています）

js
1  <script>
2    const element = document.getElementById('list');
3    // let li = document.createElement('li'); // <------- 削除
4    async function getData() {
5      try {
6        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
7        const data = await response.json();
8        console.log(data);
9        let titles = data.map(item => item.title);
10        titles.forEach(title => {
11          let li = document.createElement('li');
12          li.textContent = title;
13          element.appendChild(li);        
14        });
15      } catch (error) {
16        console.log('エラーが発生しました', error);
17      }
18    }