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

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

ただいまの
回答率

90.22%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 748

junya19970831

score 11

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

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"
        }
    ]
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/04/08 19:18

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

    キャンセル

  • defghi1977

    2018/04/08 19:22

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

const master = JSON.parse(`
{
    "商品マスタ" : [
        {
            "商品名" : "カバン"
            , "値段" : "13000"
            , "カラー" : "ブラウン"
            , "JAN" : "0000000000000"
        }
        ,
        {
              "商品名" : "ダウンジャケット"
            , "値段" : "57800"
            , "カラー" : "ブラック"
            , "JAN" : "1000000000000"        
        }
        ,
        {
              "商品名" : "寝袋"
            , "値段" : "78000"
            , "カラー" : "レッド"
            , "JAN" : "2000000000000"
        }
    ]
}
`);
console.log(master["商品マスタ"][0]["商品名"]);//→カバン

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

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる