簡単なjsonデータの書き方と取得方法について

今回はjsファイルにjsonデータを書いて取得してhtmlに出力する方法を紹介していきます。

簡単なjsonファイルの書き方と取得して出力する方法

html

jsonのデータをクラスgoodsの中に出力していきます。

<div class="goods"></div>

javascript

下記はjsonファイルではなくjsのファイルにjsonを書き方法になります。

let json_data = {
        goods: [
          {
                "id": "01",
                "name": "商品1"
          },
          {
                "id": "02",
                "name": "商品2"
          },
          {
                "id": "03",
                "name": "商品3"
          }
        ]
}

javascript（取得して出力する）

json_get();

function json_get(){

        //jsonデータ取得
        let jsonData = JSON.stringify(json_data);

        for (var i = 0; i < json_data.goods.length; i++) {
        
		//商品名を取得
	        let json_good_list = '<div class="item">' + json_data.goods[i].name + '</item>';
		jQuery('.goods').append(json_good_list)
        }
}

サンプル