KumaTechLab
2020-05-30/2023-05-23

【JavaScript】JSONデータの取り扱い

【JavaScript】JSONデータの取り扱い

以下のような感じのものをJSONデータで行っているサイトに遭遇したので、やってみようと思います。

そこでとりあえずJSONデータの取り扱いについてやっていこうと思います。

本記事の内容

  • JSONってなんだ
  • JavaScriptで読み込んでみる

JSONってなんだ

JSONを取り扱うにあたってそもそもJSONについてあまり深く考えたことがなかったので調べてみました。

  • Jsonとは
  • Json形式

１．Jsonとは

JSONは「JavaScript Object Notation」の略であり、テキストベースのデータフォーマットです。

似たようなものでは「XML」が挙げられます。同じ内容を「XML」と「JSON」で記述するなら「JSON」の方が楽に書けます。

また、略からも下のJSON形式からもわかるようにJavaScriptのオブジェクト表記です。

２．JSON形式

JSONは以下のような形式で記述されます。

｛
　 "name"　: "ディープインパクト" ,
   "speed" : 100 , 
   "stamina" : 90
｝

「key」「value」をセットで扱うタイプですね。

「,」区切りで「”(ダブルクォーテーション)」で囲みます。数字はそのまま記入することが可能です。

また、スラッシュやダブルクォーテーションなどはエスケープシーケンスを使用します。

オンラインでバリデーションチェックできるツールもあるみたいです。

JavaScriptで読み込んでみる

jQueryのgetJSON()を使って取得します。

$.getJSON( url , (date) => {
  //処理
});

他にはXMLHttpRequestを使って取得する方法です。

こちらは少し複雑になりそうなので近々別記事でまとめます。

まずは、HTML部です。

<section class="con">
		<div>
			<p>ボタンを押して取得します。<br>(getJSON())</p>
			<input type="button" class="btn" value="取得" onclick="getJson()">
		</div>
		<div id="resGetJson">
		</div>
	</section>
	<section class="con">
		<div>
			<p>ボタンを押して取得します。<br>(XMLHttpRequest())</p>
			<input type="button" class="btn" value="取得" onclick="xhrJson();">
		</div>
		<div id="resXhrJson">
		</div>
	</section>

二通りの方法縦に並べて表示します。

ボタン押してJSONから取得のイベントが発火します。

id設定してあるdivの子要素で表示します。

次に肝心のJavaScript部です。

まずはgetJSONの方です。



		function getJson() {
			let url = "json/hourse.json";
			$.getJSON(url , function(data) {
				$("#resGetJson").append("<p>NAME:" + data.name + " <br>SPEED:" + data.speed +"<br>STAMINA:" + data.stamina + "</p>");
			});
	  }

urlにJSONファイルの場所をしています。

getJSONでurlからJSONファイルをdataに格納し、出力したい個所にpタグ付けて出力しています。

こちらの方は短くてわかりやすいかもしれません。

次にXMLHttpRequestを使って取得する方です。

function xhrJson() {
			let url = "json/hourse.json";
			//XMLHttpRequestオブジェクト生成
			let request = new XMLHttpRequest();
			//リクエストの初期化
			request.open("GET" , url);
			//リクエストプロパティのレスポンス型の定義
			request.responseType = "json";
			//リクエストの送信
			request.send();


			request.onload = function(){
				let result = request.response;
				let elem = document.createElement("p");
				let parElem = document.getElementById("resXhrJson");
				elem.innerHTML =  "NAME:" + result.name + " <br>SPEED:" + result.speed +"<br>STAMINA:" + result.stamina ;


				parElem.appendChild(elem);
			};
		}

このような形になります。

基本的には同じような構造です。url先のJSONデータをGETで取得します。

取得が完了したら、HTMLに出力という形です。

今回はJSON形式で取得しましたが、textで受け取りJavaScriptオブジェクトにパースして利用することやJSONデータを文字列に変えることもできます。

この辺りはまとめたらURL貼り付けます。

デモページ

まとめ

jqueryのgetJSONを使った方が取り扱いが簡単そうな気がしますね。

一方XMLHttpRequestはプロパティやメソッドに種類があるため、多様な切り分けができそうです。

こちらで続きをやっています。モーダルでインフォメーションを表示しています。

2020 KumaTechLab.