超便利！jQueryでJSONデータを解析し、HTMLに表示する／前編

jQuery2013年7月31日

jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示するの記事では、XMLデータを解析しHTMLに表示する方法をご紹介いたしました。今回は、JSONというデータ形式を使用した実装をご紹介します。

そもそもJSONって何？

JSONとは「JavaScript Object Notation」の略で、XMLと同様のシンプルなテキストで構成されたフォーマットです。
名前の由来の通りJavascriptの配列とよく似ており、XMLに比べ処理も早く視認性の高いため、メンテナンス性の優れたデータ形式となります。

JSONのメリット

• Javascriptとの親和性が高い
• 処理が早い
• Javascript以外のプログラム言語でもデータ形式として扱いやすい
• クロスドメインでデータを取得可能

JSONの記述例

var data = {"release": [
{
"day": "2013.09.30",
"label": "company",
"category": "企業情報",
"content": "テキストテキストテキスト",
"url": "http://www.yahoo.co.jp/",
"target": "_blank"
}
]}

XML同様、下記のようにデータを入れ子にすることも可能です。

var data =
[{
"day": "2013.09.30",
"contents": [
{
"lanel":"company",
"category":"企業情報",
"text":"ほげほげほげほげ",
"url":"http://www.yahoo.co.jp/",
"target":"_blank"
}
]
},
{
"day": "2013.10.01",
"contents": [
{
"lanel":"product",
"category":"商品情報",
"text":"もげもげもげもげ",
"url":"https://www.google.co.jp/",
"target":"_self"
}
]
}];

次の記事では、実際にJSONデータを扱った実装例をご紹介します。

• 超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編

• 今更聞けない！jQueryではじめるJavascript超初心者講座
• 超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編

この記事を読んでいる方にオススメの記事

• jQuery今更聞けない！jQueryではじめるJavascript超初心者講座
• jQueryニュースティッカーをjQueryで実装する／フルスクラッチ編
• jQueryニュースティッカーをjQueryで実装する／jquery.slider編
• jQueryニュースティッカーをjQueryで実装する／bxslider編
• jQueryjQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する
• jQueryチェックボックスの一括チェック（全選択）／一括解除（全解除）

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。