APIリクエストをしデータを取得後、プルダウン項目にあわせてデータ検索しリスト表示をしたい

実現したいこと

APIリクエスト。プルダウン項目にあわせてデータ検索しリスト表示をしたい

前提

JavaScript使用。jQueryなし。プルダウンメニュー「全件」で表示ボタンを押したらAPIから取得した全データをリスト表示。「未完了」で表示ボタンを押したらAPIデータのcompletedがfalseのデータをリスト表示。「完了」で表示ボタンを押したらAPIデータのcompletedがtrueのデータをリスト表示したい。

該当のソースコード


<!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" >Todo表示</button>
        </form>
        <!-- ここにリスト表示 -->
        <ul id="list">
        </ul>
    </div><!-- wrapper -->

    <script>
        // APIを実行する　
        getData()

        function formSubmit() {
            // 送信はキャンセルする
            f.onsubmit = () => false
        }

        async function getData() {
            try{
                const response = await fetch('https://.....');
                const date = await response.json();
                console.log(date);
            }catch(error){
            console.log("response:",error);
            }

        let myForm = document.forms['sampleForm'];
        sampleForm.addEventListener('submit', function(){
 
        event.preventDefault();
        let submitStr = sampleForm.elements['select'].value;


        if(submitStr === ""){
            console.log("全件")
            
        }else if(submitStr === "0"){
            console.log("未完了")
        }else{
            console.log("完了")
        }
        });
        
    }
    </script>
APIの中身↓
0: Object { userId: 1, id: 1, title: "delectus aut autem", … }
completed: false
id: 1
title: "delectus aut autem"
userId: 1

1: Object { userId: 1, id: 2, title: "et porro tempora", … }
completed: true
id: 2
title: "et porro tempora"
userId: 1

試したこと

fetch,awaitでAPIデータを取得しconsole表示は出来ましたが、このデータをプルダウンメニューに合わせてフィルターをかけリスト表示する方法がわかりません。
定数responseや定数dateに対してfilter,createElement,removeChild,appendChildなどを使用しフィルターをかけHTMLのli要素を追加してリスト表示を試みましたが、定数responseや定数dateが見つからないと表示されてしまいうまく出来ません。
初心者で質問の仕方や状況説明など分かりづらいかと思いますがご教示頂けると嬉しいです。よろしくお願いいたします。

int32_t

2023/10/05 14:45

> 定数responseや定数dateに対してfilter,createElement,removeChild,appendChildなどを使用しフィルターをかけHTMLのli要素を追加してリスト表示を試みましたが、定数responseや定数dateが見つからないと表示されてしまいうまく出来ません。その試したコードと出たエラーを開示してください。

Saaaki

2023/10/06 13:04

ご質問いただきありがとうございます。以下のように記述しましたがUncaught ReferenceError: date is not definedというエラーが出てしまいます。 if(submitStr === ""){ console.log("全件") }else if(submitStr === "0"){ console.log("未完了") let element = document.getElementById('list') element.remove(); //リストを削除 let array = date.filter(function(item){ return item.completed = false; }) //APIデータのcompletedがfalseのものにフィルター let falseList = document.getElementById('list'); document.createElement('li'); li.textContent = array ; falseList.appendChild(li); //フィルターをかけたものにli要素を足しリスト表示 }else{ console.log("完了") }

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

回答1件

ベストアンサー

変数 date のスコープが try catch の間だけになっていて、それ以外では見えなくなっています。変数 date の宣言だけでもその外に出してやると上手くいくようになるかと思います。

js
1        async function getData() {
2            let date;
3            try {
4                const response = await fetch('https://.....');
5                date = await response.json();
6                console.log(date);
7            } catch(error) {