いつもお世話になっています。
JavaScript, jQueryを用いて
個数を入力し、JANコードを13文字入力すると、入力したJANコードと個数を出力する画面を作成しております。
課題として
JANコードを13文字入力し、入力したJANコードと個数を表示する際に
jsonからJANコードに一致する商品を検索し、その商品名、値段、カラーをJANコードの横に
一緒に出力したいと考えています。
当方JSONを扱うのは初めてで、jsonのデータを取得し、一覧表示することはできたのですが、
上記の課題が実現できず、
どのように書けば実現できるのかを教えていただきたいです。
なお、サーバーと通信はしません。
よろしくお願い致します。
環境
MacOS High Sierra 10.13.4
Google chrome 65.0
index.html
<!DOCUTYPE html> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <!--<link rel="stylesheet" href="s.css">--> </head> <body> <form name="form1" action="" method="post" > <div class="all"> <div class="box"> <input type="submit" id="submit" value="送信"> <input type="number" id="num_input" type="number" value="1" min="1" step="1" max="99" autocomplete="off"/> <input type="button" id="num_plus" value="+"> <input type="button" id="num_minus" value="−"> <input type="text" id="jan_input" maxlength="13" autofocus autocomplete="off" placeholder="JANコードを入力"/> </div> <div id="inputs"/></div> </div> </form> <hr /> <table> <thead> <tr> <th>商品名</th> <th>値段</th> <th>カラー</th> <th>JAN</th> </tr> </thead> <tbody id="data_list"> </tbody> </table> </body> <script> $(function() { //ページ読み込み時に入力するテキストボックスへフォーカス document.form1.jan_input.focus(); //クリックされた位置の要素をすべて削除する $(document).on("click", "#delete", function(event){ //alert('削除処理'); var click_name = $(this).attr("name"); var del = document.getElementById(click_name); del.remove();; jan_input.disabled = false; num_input.disabled = false; jan_input.style=""; jan_input.value = ""; document.form1.jan_input.focus(); }); //入力用テキストボックスの個数を+ボタンクリックで加算 $('#num_plus').on('click', function() { //alert("加算処理2"); num_input.valueAsNumber += 1; }); //入力用テキストボックスの個数を-ボタンクリックで減算 $('#num_minus').on('click', function() { //alert("減算処理2"); if(num_input.valueAsNumber != 1){ num_input.valueAsNumber -= 1; } }); //DOMで生成された個数を+ボタンクリックで加算 $(document).on("click", "#num_plus", function(event){ var click_name = $(this).attr("name"); const num_plus = inputs.querySelector(`input[type='number'][name='${click_name}']`); //alert("加算処理"); num_plus.valueAsNumber += 1; }); //DOMで生成された個数を-ボタンクリックで減算 $(document).on("click", "#num_minus", function(event){ var click_name = $(this).attr("name"); const num_minus = inputs.querySelector(`input[type='number'][name='${click_name}']`); //alert("減算処理"); if(num_minus.valueAsNumber != 1){ num_minus.valueAsNumber -= 1; } }); $.getJSON("test.json", function(data) { var count = 0 ; //alert(JSON.stringify(data)); $(data.商品マスタ).each(function() { $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ; $("#data_list #data_id" + count).append("<td>" + this.商品名 + "</td>") ; $("#data_list #data_id" + count).append("<td>" + this.値段 + "</td>") ; $("#data_list #data_id" + count).append("<td>" + this.カラー + "</td>") ; $("#data_list #data_id" + count).append("<td>" + this.JAN + "</td>") ; count++ ; }); }); }); const JAN = "jan_code", NUM = "num_code"; //JANコードが13桁入力されたときに処理 jan_input.oninput = e => { if(jan_input.value.length >= 13){ //JAN、個数のname属性をjan_code0000000000000, num_code0000000000000と表現する const code = jan_input.value; const janName = JAN + code; const numName = NUM + code; //inputsを検索してjanコードの登録状態を確認する const jan = inputs.querySelector(`input[name='${janName}']`); const num = inputs.querySelector(`input[type='number'][name='${numName}']`); //同じJANコードが存在しない場合にJANコードの追加処理 if(!jan){ //alert("JAN追加"); inputs.insertAdjacentHTML("beforeend", ` <div id="${janName}" class="demo"> <input type="button" id="delete" value="削除" name="${janName}"> <input type="number" name="${numName}" value="${num_input.value}" min="1" step="1" max="99" autocomplete="off"> <input type="button" id="num_plus" value="+" name="${numName}"> <input type="button" id="num_minus" value="−" name="${numName}"> <input type="text" id="${janName}" value="${jan_input.value}" readonly/> </div>`); } //同じJANコードが存在する場合に個数のカウントアップ処理 else{ //alert("個数加算"); num.valueAsNumber += num_input.valueAsNumber;//個数を加算 } //入力したJANコードと個数の初期化 jan_input.value = ""; num_input.value = "1"; } //janコードの登録個数を確認する if(inputs.querySelectorAll(`div[id^='${JAN}']`).length >= 5){ jan_input.disabled = true; num_input.disabled = true; jan_input.style="color:#FF0000"; jan_input.value = "これ以上追加できません"; 送信ボタンにフォーカスする document.form1.submit.focus(); } } </script> </html>
test.json
{ "商品マスタ" : [ { "商品名" : "カバン" , "値段" : "13000" , "カラー" : "ブラウン" , "JAN" : "0000000000000" } , { "商品名" : "ダウンジャケット" , "値段" : "57800" , "カラー" : "ブラック" , "JAN" : "1000000000000" } , { "商品名" : "寝袋" , "値段" : "78000" , "カラー" : "レッド" , "JAN" : "2000000000000" } ] }
回答1件
あなたの回答
tips
プレビュー