JSONとは
JavaScript Object Notationの略。
一言で言うと、わかりやすく簡単なデータ記述言語。
WEB APIでのデータの送受信などにJSONフォーマットが使われる。
Web API とは
Application Programming Interface（アプリケーション・プログラミング・インターフェース）の略。
「Webサービスをプログラミングから操作するための方法」という意味。
JSONデータの表記例
変数に表記する
[html] <!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
let data = {
‘name’: ‘田中’,
‘age’: 21
}
//JSONデータをalertを使って表示させる
alert(‘名前:’ + data.name + ‘ 年齢:’ + data.age);
</script>
</body>
</html>
[/html]
いくつかのデータを入れて一つずつ取り出す
[html] <!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
function func() {
let data = {
"name": "佐々木",
"gender": "male",
"city": "Tokyo"
};
//JSONデータをalertを使って表示させる
alert(data.name);
alert(data.gender);
alert(data.city);
}
func();
</script>
</body>
</html>
[/html]
複数のデータを格納する
[html] <!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<ul id="output">
<script>
// 配列として扱う
let data = [
{‘name’: ‘田中’, ‘age’: 18 },
{‘name’: ‘山田’, ‘age’: 19 },
{‘name’: ‘斉藤’, ‘age’: 20 },
{‘name’: ‘佐藤’, ‘age’: 21 },
] for(let i in data){
$("#output").append("<li>" + data[i].name + "【" + data[i].age + "】</li>");
}
</script>
</ul>
</body>
</html>
[/html]
