【JavaScript 】JSONPlaceholderを使ってAPIを実行し、特定要素の絞り込みをしたい

実現したいこと

ここに実現したいことを箇条書きで書いてください。

APIの取得、実行

前提

JavaScriptでプルダウンした項目に合わせて
Todoデータの検索ができるように実装しようとしています。

TodoデータはJSONPlaceholderから取得したいです。

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

全件入力した時はデータが反映されますが、完了と未完了を入力した時のデータ反映がされません。
エラーなどは出ておらず、何も変わらない状態です。
原因がわからないので、力を貸して頂きたいです。

該当のソースコード

CSS
1#sampleForm {
2    margin: 20px 0 0 20px;
3}
4
5#box {
6    margin: 20px 0 0 20px;
7    width: 320px;
8    height: 180px;
9    background-color: #fdd;
10}
11#list li {
12    list-style-type: disc;
13    margin-left: 40px;
14}
15
16.error {
17    font-size: 12px;
18    color: #f00;
19    display: none;
20}
21ソースコード
22```javascript
23<script>
24        async function getData() {
25          event.preventDefault();
26          const response = await fetch(
27            "https://jsonplaceholder.typicode.com/todos"
28          );
29          const datas = await response.json();
30          datas.forEach((x) =>
31            list.appendChild(
32              Object.assign(document.createElement("li"), {
33                textContent: x.title,
34              })
35            )
36          );
37        }
38      </script>
39      <div id="wrapper">
40        <form method="post">
41          Completed:
42          <select name="select">
43            <option value="">全件</option>
44            <option value="0">未完了</option>
45            <option value="1">完了</option>
46          </select>
47          <button type="submit" onclick="getData()">Todo表示</button>
48        </form>
49        <ul id="list"></ul>
50      </div>
51
52### 試したこと
53下記のコードは実装可能でした。
54
55```index.html
56<head>
57    <meta charset="UTF-8">
58</head>
59<body>
60    <div id="wrapper" >
61        <button onclick="getData()">API呼び出し</button>
62    </div><!-- wrapper -->
63
64    <script>
65        async function getData() {
66            try {
67                const response = await fetch('https://jsonplaceholder.typicode.com/users');
68                const datas = await response.json();
69                console.log(datas)
70            } catch(e) {
71                // API実行失敗
72                console.log(e)
73            }
74        }
75    </script>
76
77
78
79### 補足情報（FW/ツールのバージョンなど）
80
81ここにより詳細な情報を記載してください。
82プルダウンで全件を選択したらurlが出てきますが、未完了と完了を選択しても出てくる情報が全件選択の時と変わらないので絞り込みをしたいです。初心者でわかりづらいと思いますが、よろしくお願いいたします。

yambejp

2024/03/05 08:52

マークダウンがおかしいようです調整お願いします

monkey2988

2024/03/05 10:02

ありがとうございます！指摘いただいた部分を修正したら解決しました！

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

回答1件

ベストアンサー

参考までに

javascript
1<script>
2function getData(){
3  const v=document.querySelector('[name=select]').value;
4  const usp=new URLSearchParams();
5  if(v) usp.append('completed',v=='0'?'false':'true');
6  let url="https://jsonplaceholder.typicode.com/todos";
7  if(usp.size) url+="?"+usp.toString();
8  list.innerHTML="";
9  fetch(url).then(res=>res.json()).then(data=>{
10    const fragment = document.createDocumentFragment();
11    fragment.append(...data.map(({title})=>Object.assign(document.createElement('li'),{textContent:title})));
12    list.appendChild(fragment);
13    });
14  return false;
15}
16</script>
17<div id="wrapper">
18<form method="post">
19  Completed:
20  <select name="select">
21  <option value="">全件</option>
22  <option value="0">未完了</option>
23  <option value="1">完了</option>
24  </select>
25  <button type="submit" onclick="return getData()">Todo表示</button>
26</form>
27<ol id="list"></ol>
28</div>