APIで取得した連想配列から指定した値をもつオブジェクトを取得して、名前だけリスト化したい

Question

実現したいこと

APIで取得した200個の連想配列から、画像にあるcompletedの値がfalseのものを抽出して、さらにそれらのtitleを生成した<li>に並べたいです

現時点でコードに記載している「//API取得して全件のtitleを出すfetchAPIAll()」には
・API取得（200件）、dateに格納
・for文にて一つずつ確認し、<li>を生成
・dateからtitleだけを抜き出し、datelistに格納してこれを<li>に自動記述
まではできました。

これとは別に「 //API取得してcompletedがfalseのtitleを出すfetchAPIfalse()」に
・API取得(200件)、dateに格納
・dateからfilter()にてcompletedがfalseのものだけを抽出、Falsedate変数に格納。
・for文にて一つずつ確認し、<li>を生成
・Falsedateからtitleだけを抜き出し、datelistに格納してこれを<li>に自動記述

ということをしたかったのですが、fetchAPI()は起動するのにfetchAPIfalse()は処理が働きません。
自力でこのやり方を見つけたこともあって、可能であればこの流れのまま記述を進めていきたいです。

どこを改善すべきか、どの辺が怪しいなどありましたら、是非教えていただけると助かります。

よろしくお願いいたします！

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

エラーメッセージ

該当のソースコード

Javascript

ソースコード

    <ul id="list">
        <!-- ここにリスト表示 -->
    </ul>
</div><!-- wrapper -->

<script>
    //API取得して全件のtitleを出すfetchAPIAll()
    async function fetchAPIAll(){
        try {
            let response = await fetch('https://jsonplaceholder.typicode.com/todos');
            let date = await response.json();

            for(let i = 0; i < date.length; i++){
                let datelist = document.createElement('li')
                datelist.textContent = date[i].title
                document.getElementById('list').appendChild(datelist)
            }
            console.log(date)
            }catch(error){
                console.log('Response Error:' ,error);
            }
        }

    //API取得してcompletedがfalseのtitleを出すfetchAPIfalse()
    async function fetchAPIfalse(){
        try {
            let response = await fetch('https://jsonplaceholder.typicode.com/todos');
            let date = await response.json();

            var Falsedate = date.filter(function(){
                return date.completed == "false";
            })
            for (let i = 0; i < Falsedate.length; i++){
                let FalsedateList = document.getElementById('li')
                FalsedateList.textContent = Falsedate[i].title
                document.getElementById('list').appendChild(FalsedateList)
            }

            }catch(error){
                console.log('Response Error:' ,error);
            }
        }

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。
![]

Comments

[int32_t]

> fetchAPIfalse()は処理が働きません。

「働きません」では現象がわかりません。具体的にはどうなるのでしょうか?
fetchAPIfalse() が呼ばれたかどうかは確認しましたか?

[higulasi]

説明が足らず申し訳ありませんでした

fetchAPIfalse()自体は処理を開始し、date変数へAPI200件を格納（logで確認）はされたのですが、その後のFalsedate変数へのfalseでフィルタリングしたはずのデータが格納されません。

質問欄に新たにコードの画像とその結果の画像を貼らせていただきます。
少し書き加えていますが、コメントアウトしているので内容は元の質問コードと大差はないかと思います。

[CTRL-S]

return date.completed == "false";
じゃなくて
return date.completed === false;
なのでは？

ちなみに
fetchAPIfalse()はfetchAPIAll()に１行追加するだけでできます。
for文の1行目に
if (date[i].completed !== false) continue;

つまり関数を１つにまとめるのも容易にできます。

Answer 1

            var Falsedate = date.filter(function(){
                return date.completed == "false";
            })

date.completed が論理値プリミティブだと、この条件は常に偽になります。右辺が文字列だからです。ここは return !date.completed; でよいでしょう。

Comments

[higulasi]

回答ありがとうございます！
今、「return !date.completed == "false"」「return !date.completed == false」をそれぞれ試したのですが、Falsedate変数をログでとっても「[] length:0」となってしまいます。

「return !date.completed；」だけは配列をログで出せたのですが、出てきた配列はフィルタリングはされていませんでした。（これは何でフィルタリングするかを指定していないから？）

こうなるとそもそもdateから配列を取り出すこのコード自体が大幅に違うのでしょうか？

[int32_t]

おっと、他にも間違いがあったのを見逃してました。配列の completed プロパティではなくて、配列要素の completed プロパティを見る必要がありますね。

const Falsedate = date.filter(function(item) { return !item.completed; });

[higulasi]

ありがとうございます！無事にリスト化できました！
質問の情報が足らずに申し訳ありませんでした！