質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4093閲覧

JSONから特定のデータを出力する

退会済みユーザー

退会済みユーザー

総合スコア0

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/04/08 09:06

編集2018/04/08 10:37

いつもお世話になっています。

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" } ] }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/04/08 10:18

「解決できず」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
defghi1977

2018/04/08 10:22

サーバーなどとの通信はしないのですね?(既に商品マスタJSONがダウンロード済みであると)
guest

回答1

0

ベストアンサー

JSON(文字列)はJSON.parseメソッドでJavaScriptオブジェクトに変換可能です. つまり,次のような操作が可能です.

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JavaScript

1const master = JSON.parse(` 2{ 3 "商品マスタ" : [ 4 { 5 "商品名" : "カバン" 6 , "値段" : "13000" 7 , "カラー" : "ブラウン" 8 , "JAN" : "0000000000000" 9 } 10 , 11 { 12 "商品名" : "ダウンジャケット" 13 , "値段" : "57800" 14 , "カラー" : "ブラック" 15 , "JAN" : "1000000000000" 16 } 17 , 18 { 19 "商品名" : "寝袋" 20 , "値段" : "78000" 21 , "カラー" : "レッド" 22 , "JAN" : "2000000000000" 23 } 24 ] 25} 26`); 27console.log(master["商品マスタ"][0]["商品名"]);//→カバン

ここまでくれば後は配列の検索処理だけで済みますから, 例えばArray.prototype.findメソッドを使うとすれば,

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find

JavaScript

1const goods = master["商品マスタ"].find(goods => goods.JAN == "1000000000000"); 2console.log(goods["商品名"], goods["値段"], goods["カラー"]);//ダウンジャケット 57800 ブラック

とすることでJSONデータの検索が可能です.

投稿2018/04/08 11:10

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問