【JSON】データフォーマットjsonの書き方をマスターする

最近では、データを表示する際にjsonを使ったサイトを見ることが多くなってきました。

ですがそもそもjsonって何?と思っている人も多いのではないでしょうか?

今回は下記の内容で紹介していきたいと思います。

jsonとはそもそも何か?

jsonの書き方のルールが知りたい

jsonの書き方をマスターしたい(入れ子)

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jsonとは


jsonとはJavaScript Object Notation(ジャバスクリプト オブジェクト ノオテェシャン)の略でデータを扱うデータフォーマットの形式の一つになります。

データフォーマットにはjson以外にもCSVやXMLなどいろいろあります。

json、csv、XMLはすべて同じデータを扱う形式ですがそれぞれに書き方のルールが違います。

まずは、jsonの基本の形を覚えておくことが大事ですね。

jsonを使うメリット

jsonを使うメリットとしては、jsデータを扱いやすくデータに名前を持たせることができるので視覚的にどんなデータなのかが分かりやすくなります。

jsonの基本的な書き方

jsonの基本的な書き方を紹介いたします。

例えばナンバー、名前、タイプの3つのデータがあるときの書き方としては下記になります。

下記のようにnum、name、typeなどは自由に決めることができます。

自分が見ても他人が見てもわかりやすいものが良いと思います。

一番シンプルな基本の書き方

var data = [
{
     "num": "1",
     "name": "名前1" ,
     "type": "タイプ1"
},
{
     "num": "2",
     "name": "名前2" ,
     "type": "タイプ2"
}
]

データは、ダブルクオーテーションで囲む

データの参照

次はfor文を使用して上で設定したnameの値を参照したいと思います。

下記のコードで「名前1」と「名前2」という値を参照できます。

for(var i in data){
     console.log(data[i].name); //nameの値を参照
} 

グループ分けした書き方

次は、入れ子にしてグループ分けした書き方になります。

var data = [
	{
		"item1": [
			{
				"num": "1",
				"name": "名前1",
				"type": "タイプ1"
			}
		],
		"item2": [
			{
				"num": "2",
				"name": "名前2",
				"type": "タイプ2"
			}
		]

	}
]

jsonの読み込み方

ajax()を使って読み込む

$.ajax({
	type: 'GET',
	url: 'jsonのパス',
	dataType: 'json'
	success: function(data) {
		成功したときの処理
	},
	error: function(data) {
		エラーのときの処理
	}
})

下記のページを閲覧して成功したときはconsole.logに「成功」という文字が表示されます。

自分の書いたjsonが正しい書き方がどうか確かめたい場合

自分の書いたjsonが正しい書き方かどうかを確認したい場合は、下記のサイトで確認することができます。

JSON Formatter & Validator
Format and validate JSON data so that it can easily be read by human beings.

jsonを勉強するためのおすすめ書籍

PythonとJavaScriptではじめるデータビジュアライゼーション

コメント

タイトルとURLをコピーしました