最近では、データを表示する際に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が正しい書き方かどうかを確認したい場合は、下記のサイトで確認することができます。
コメント