###実現したいこと
お世話になります。
最近javascript勉強始めました。
初めて質問させていただきます。
よろしくお願いします。
・javascriptを使用して、JSONデータを取得。
・JSONデータの配列のtitle部分をリスト表示
・「全件」をクリックしたら、全てのリストが表示
・「未完了」をクリックしたら、completedが「false」になっているもののみを表示
・「完了」をクリックしたら、completedが「true」になっているもののみを表示
このような振る舞いをしたいのですが、
全件をリスト表示することができなくて作業が止まってしまっております。
前提
javascriptでJSONデータを取得できました。
その取得したデータのtitleに記入されている部分をボタンをクリックすると、
添付画像のように全件リスト表示させたいです。
発生している問題・エラーメッセージ
JSONデータの取得をして、
ボタンを押すとtitleに記載している文字が表示されるところまでいきましたが、
一気に表示されてしまいます。
該当のソースコード
html
1<!DOCTYPE html>2<html>3 4<head>5 <meta charset="UTF-8">6 <title>lesson06 検索フォーム</title>7 <link rel="stylesheet" type="text/css" href="base.css">8</head>9 10<body>11 <div id="wrapper">12 <form id="sampleForm" method="post" action=""13 name="sampleForm" onsubmit="return submitStr()">14 Completed: 15 <select name="select" id="select">16 <option value="">全件</option>17 <option value="0">未完了</option>18 <option value="1">完了</option>19 </select>20 <button type="submit" id="submit">Todo表示</button>21 </form>22 <!-- ここにリスト表示 -->23 <ul id="list">24 </ul>25 </div><!-- wrapper -->26 27 <script>28 const element = document.getElementById('list');29 let li = document.createElement('li');30 31 async function getData() {32 try {33 const response = await fetch('https://jsonplaceholder.typicode.com/todos');34 const data = await response.json();35 console.log(data);36 let titles = data.map(item => item.title);37 li.textContent = titles;38 element.appendChild(li);39 } catch (error) {40 console.log('エラーが発生しました', error);41 }42 }43 44 let myForm = document.forms['sampleForm'];45 const btn = document.getElementById('submit');46 47 btn.addEventListener('submit', submitStr);48 function submitStr(){49 event.preventDefault();50 let submitStr = document.forms.sampleForm.select.value;51 console.log(submitStr);52 if(submitStr == ''){53 getData();54 }55 }56 57 58 </script>59</body>60 61</html>
css
1@charset "UTF-8";2/* reset */3body, h1, h2, h3, h4, h5, h6, p, address,4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {5 margin: 0;6 padding: 0;7 border: none;8 font-style: normal;9 font-weight: normal;10 font-size: 100%;11 text-align: left;12 list-style-type: none;13 border-collapse: collapse;14}15 16textarea { font-size: 100%; vertical-align:middle;}17img { border-style: none; display: block; }18hr { display: none; }19em{font-style: normal}20input{line-height:auto;vertical-align:middle;}21strong.more{color:#c30}22a{text-decoration: none;}23 24html {25 26}27 28body {29 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;30}31 32* {33 -webkit-box-sizing: border-box;34 -moz-box-sizing: border-box;35 -o-box-sizing: border-box;36 -ms-box-sizing: border-box;37 box-sizing: border-box;38}39 40/* 上の部分は気にせずここから書く */41#sampleForm {42 margin: 20px 0 0 20px;43}44 45#box {46 margin: 20px 0 0 20px;47 width: 320px;48 height: 180px;49 background-color: #fdd;50}51#list li {52 list-style-type: disc;53 margin-left: 40px;54}55 56.error {57 font-size: 12px;58 color: #f00;59 /* display: none; */60}61
試した内容
３7,38行目を削除して、下記for文を入れてみましたが、
エラーは出ていないものの、リスト表示されませんでした。
for (let i = 0; i < titles.lenght; i++) {
li.textContent = titles[i];
element.appendChild(li);
}
0 コメント