フロントエンド技術を学ぼう 2-17.JSONについて学ぶ-もじゃげくらぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第27回はPart II: Learning Front-End Devから、17項のLearn JSON (JavaScript Object Notation)を紹介します。

JSONについて学ぶの説明です。

JSONについて学ぶ

JSON(JavaScript Object Notatio)は、人間が読めるテキストを使用して属性 - 値のペアからなるデータオブジェクトを送信する為のオープンな標準データフォーマットです。非同期ブラウザ/サーバー通信(AJAX)に使用される主なデータ形式であり、主にXML(AJAXで使用される)を置き換えます。もともとJavaScriptスクリプト言語から派生したものですが、JSONは言語に依存しないデータフォーマットです。 JSONデータの解析と生成のコードは、多くのプログラミング言語で容易に利用できます。

JSON形式はもともとDouglas Crockfordによって規定されました。これは現在、2つの競合する標準、RFC 7159およびECMA-404によって記述されています。
ECMA標準は許可された文法構文のみを記述していますが、RFCでは語義についてや、セキュリティ上の考慮事項を記述しています。JSONの公式インターネットメディアの種類はapplication/jsonです。JSONファイル拡張子は.jsonです。

参照元：英語版Wikipedia

JSONの書き方

JSONはJavaScriptのオブジェクトを記述するときと同じ様に書きます。違うのは、基本的にすべてのフィールドや値をダブルクウォート""で囲む必要がある、ということです。

{
"mojage"{
"age": 10,
"live": true,
"favorite": ["coffee", "music", "cats"]
}
}

参照元 :

json.com [読み物]
What is JSON [視聴](JSONとは何か)
JSON について [読み物][日本語]

JavaScriptでJSONを扱う

JSON.parse()でJSON文字列をJavaScriptのオブジェクトに変換し、JSON.stringify()でJavaScriptの値をJSON文字列へ変換します。

httpObj = new XMLHttpRequest();
httpObj.open("get", "./js/group.json", true);
httpObj.onload = function(){
var myData = JSON.parse(this.responseText);
var txt = "";
for (var i=0; i < myData.length; i++){
	var option = document.createElement("option");
	option.innerText = myData[i].name;
	option.value=myData[i].value;
	document.getElementById("group_select").appendChild(option);
}
httpObj.send(null);

参照元 :