Q&A
fetchAPIfalse() を呼ぶコードがないようですが、どういうときに呼びたいのでしょうか。
実現したいこと
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()は処理が働きません
よろしくお願いいたします！
ここに実現したいことを箇条書きで書いてください。
- ▲▲機能を動作するようにする
前提
ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!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">Email表示</button> </form> <!-- ここにリスト表示 --> <ul id="list"> </ul> </div><!-- wrapper --></body> </html> ```ここに言語名を入力 Javascript ソースコード ```<script> //全件の実行 async function fetchAPI() { try { //APIALLをfetchによってawaitで行う let response = await fetch('https://jsonplaceholder.typicode.com/todos'); let data = await response.json(); //valueArrayを配列にして返す let valueArray = Object.values(data); console.log(valueArray); //forで配列を並び変えたいが配列が空かもしれない for (let i = 0; i < valueArray.length; i++) { //ここで画面上に出力する var datalist = document.createElement('li') datalist.textContent = valueArray[i].title console.log(datalist) document.getElementById('list').appendChild(datalist) } } catch (error) { console.log('Response Error:', error); } //fetchAPIfalseが反映しない async function fetchAPIfalse() {console.log(1) try { let response = await fetch('https://jsonplaceholder.typicode.com/todos'); let data = await response.json(); console.log(1) } catch (error) { console.log('Response Error', error); } } } fetchAPI(); //// async function fetchAPIfalse(){ // try{ //APIfalseをfetchによってawaitで行う // let response = await fetch('https:/jsonplaceholder.typicode.com/todo'); // let data = await response.json(); //取得したAPIからfalseのものだけ抽出したい // let incompletedTask =data.filter(task =>task.completed === false); //ここでリスト化のulを取得する // let listElement = document.getElementById('list'); //取得した配列を繰り返し処理してfalseを出力したい // incompletedTask.forEach(task => { //新しいliを作る // var listitam = document.createElement('li'); //タイトルを設定 // listitam.textContent = task.title; // console.log(false) //画面上に表示させたい //listElement.appendChild(listitam); // }); // const valueArray = [false] // const FalsedateList = valueArray.filter(value =>(value>=1)) //console.log(FalsedateList); // }catch(error){ // console.log('error',error); // } // } //未完了の実行 // async function fetchAPIfalse() { // try { //APIfalseをfetchによってawaitで行う // let response = await fetch('https:/jsonplaceholder.typicode.com/todo'); // let data = await response.json(); // / / 取得したAPIからfalseのものだけ抽出したい // let incompletedTask = data.filter(task => task.completed === false); //ここでリスト化のulを取得する // let listElement = document.getElementById('list'); //取得した配列を繰り返し処理してfalseを出力したい //incompletedTask.forEach(task => { //新しいliを作る // var listitam = document.createElement('li'); //タイトルを設定 //listitam.textContent = task.title; // console.log(false) //画面上に表示させたい // listElement.appendChild(listitam); // }); // const valueArray = [false] // const FalsedateList = valueArray.filter(value =>(value>=1)) //console.log(FalsedateList); // } catch (error) { // console.log('error', error); // } //} // fetchA //APIfalseの実行 //未完了を選択して送信ボタンを押すとfetchAPIが起動して未完了部分が表示される //現状、未完了を選択して送信ボタンを押してもfetchAPIが起動して全件になる //async function fetchAPIfalse(){ //try {// //APIfalseをfetchによってawaitで行う // let response = await fetch('https://jsonplaceholder.typicode.com/todos'); // let data = await response.json(); // //filterによるfalse（配列の絞り込み) // let valueArray = [false, ture]; // let falseArray = valueArray.filter(function (element) { // return element > 2; // }) // console.log(falseArray) //for文でliとlistをgetElementBuIdで出力しappendChildで追加する // for (let i = 0; i < Falsedate.length; i++) { // let FalsedateList = document.getElementById('li') // FalsedateList.textContent = Falsedate[i].title // document.getElementById('list').appendChild(FalsedateList) // console.log(FalsedateList) //} //} catch (error) { // console.log('Response Error:', error); // } //} //fetchAPI </script>
試したこと
全件のcatchの前後でconsoleで、どこまで実行しているか確認をしました
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
すべて目を通し、実行してみましたがうまくいかず
質問しています。教えてくださりありがとうございます
そうなんですね。
質問のうち、onclick属性や .addEventListener() が使われているコードを参考にしてみた方がいいと思います。int32_t さんがコメントで書かれているとおり、呼び出しがされていないので動作していないと思います。
0
ベストアンサー
別の回答で、API側でデータを選別できることは回答したかと思うのですが、受け取ったデータからフィルタするのはオーバーヘッドが大きいのでおすすめはしません。とはいえAPIで抽出ができない場合もあるので一応以下のようなソースを参考にされるとよいかと
javascript
1<script> 2document.addEventListener('submit',async e=>{ 3 e.preventDefault(); 4 const s=e.target.querySelector('[name=select]').value; 5 const data=await fetch('https://jsonplaceholder.typicode.com/todos').then(res=>res.json()); 6 const list=document.querySelector('#list'); 7 list.innerHTML=""; 8 data.filter(x=>s==="" || s==="0" && !x.completed || s==="1" && x.completed).forEach(x=>{ 9 const li=Object.assign(document.createElement('li'),{textContent:x.title}); 10 list.appendChild(li); 11 }); 12}); 13</script> 14 15<div id="wrapper"> 16<form> 17Completed: <select name="select"> 18<option value="">全件</option> 19<option value="0">未完了</option> 20<option value="1">完了</option> 21</select> 22<button type="submit" id="submit">Email表示</button> 23</form> 24<ul id="list"> 25</ul> 26</div>
参考
API側で抽出する方法
(jsでfilter処理がいらない)
javascript
1<script> 2document.addEventListener('submit',async e=>{ 3 e.preventDefault(); 4 const s=e.target.querySelector('[name=select]').value; 5 const usp=new URLSearchParams(); 6 if(s==="0") usp.append('completed','false'); 7 if(s==="1") usp.append('completed','true'); 8 const data=await fetch('https://jsonplaceholder.typicode.com/todos?'+usp).then(res=>res.json()); 9 const list=document.querySelector('#list'); 10 list.innerHTML=""; 11 data.forEach(x=>{ 12 const li=Object.assign(document.createElement('li'),{textContent:x.title}); 13 list.appendChild(li); 14 }); 15}); 16</script> 17 18<div id="wrapper"> 19<form> 20Completed: <select name="select"> 21<option value="">全件</option> 22<option value="0">未完了</option> 23<option value="1">完了</option> 24</select> 25<button type="submit" id="submit">Email表示</button> 26</form> 27<ol id="list"> 28</ol> 29</div>
投稿2023/11/09 13:02
編集2023/11/09 13:20
総合スコア117946
あなたの回答
tips
プレビュー
