mrgarita/data.json

## data.json
{
	"name": "Alice",
	"age": 13,
	"sex": "female"
}

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="main.js"></script>
    <title>JSON形式の読み込み基本3</title>
</head>
<body>
	<h1>fetchを使った例</h1>
	<p>コンソールに表示しています...</p>
</body>
</html>

## main.js
/*
 * main.js : fetchを使って非同期にJSONファイルを読み込む
 */

const url = "data.json";	// 読み込むJSONファイル

// 非同期通信でJSONファイルからデータを取得
fetch(url)
	.then(response => response.json())
	.then(data => {
		// JSON全体
		console.log(data);

		// 個別に取り出す
		console.log("name:" + data.name);
		console.log("age:" + data.age);
		console.log("sex:" + data.sex);
	});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<script src="main.js"></script>
	<title>JSON形式の読み込み基本3</title>
	</head>
	<body>
	<h1>fetchを使った例</h1>
	<p>コンソールに表示しています...</p>
	</body>
	</html>
	/*
	* main.js : fetchを使って非同期にJSONファイルを読み込む
	*/

	const url = "data.json"; // 読み込むJSONファイル

	// 非同期通信でJSONファイルからデータを取得
	fetch(url)
	.then(response => response.json())
	.then(data => {
	// JSON全体
	console.log(data);

	// 個別に取り出す
	console.log("name:" + data.name);
	console.log("age:" + data.age);
	console.log("sex:" + data.sex);
	});