APIで取得したデータの中から条件に一致している要素を出力したい

Question

実現したいこと

APIで取得したデータの中から条件に一致しているものを出力したい

前提

javascript初心者で試行錯誤しながら作成しております。
API要素の中から条件に一致している要素を表示させたいです。

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

①completedがfalseとなっている部分だけ出力したい
②completedがtrueとなっている部分だけ出力したい
filterを設定して一致する要素を取得すると考えているのですが、どこに組み込むのか、APIのデータをどのように配列すればいいのかで詰まっている状態です。

該当のソースコード

    <script>
        const submit = document.getElementById("submit");
        const lists = document.getElementById("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.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") {
                        const list = document.createElement("li");
                        list.innerText = user.;//completedがfalseとなっている部分だけ出力したい
                        lists.appendChild(list);
                    } else if (id == "1") {
                        const list = document.createElement("li");
                        list.innerText = user.; //completedがtrueとなっている部分だけ出力したい
                        lists.appendChild(list);
                    }
                };

            });
        });

    </script>

試したこと

If文の条件に&&をつけ指定できるかなども試しましたがうまくいきませんでした。
よろしくお願いいたします。

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

APIデータ

Answer 1

else if (id == "0") {
  if (user.completed === false) {
    const list = document.createElement("li");
    list.innerText = user.title;//completedがfalseとなっている部分だけ出力したい
    lists.appendChild(list);
  }
}

元のコードを上記のように書き換えてもよいですが、以下のように users をループで処理する前に Array.prototype.filter でフィルタリングした方が分かりやすいと思います。

https://codepen.io/arcxor/pen/ExGMQZq

const submit = document.getElementById("submit");
const count = document.getElementById("count");
const lists = document.getElementById("list");

submit.addEventListener("click", async function (evt) {
  const select = document.getElementById("select");
  if (select == null) return;
  const selectId = select.value;
  
  let users = await fetch("https://jsonplaceholder.typicode.com/todos").then(response => response.json());

  if (selectId === "0") {
    users = users.filter(user => user.completed === false);
  }
  else if (selectId === "1") {
    users = users.filter(user => user.completed === true);
  }

  users = users.map(user => {
    const list = document.createElement("li");
    list.textContent = user.title;
    return list;
  });
  lists.replaceChildren(...users);

  count.textContent = `${users.length} records matches.`;
});

Comments

[niniMa]

ご回答いただきありがとうございます！
filterの使用方法など理解できました。大変助かりました。