Created
October 5, 2022 01:50
-
-
Save mrgarita/46a0bb27dde2f56265c5ca71a0daf39b to your computer and use it in GitHub Desktop.
JSON読み込み基本 新しい方法(fetch)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "Alice", | |
"age": 13, | |
"sex": "female" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<script src="main.js"></script> | |
<title>JSON形式の読み込み基本2</title> | |
</head> | |
<body> | |
<h1>fetchを使った例</h1> | |
<p>コンソールに表示しています...</p> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* main.js : fetchを使って非同期にJSONファイルを読み込む | |
*/ | |
const url = "data.json"; // 読み込むJSONファイル | |
// 非同期通信でJSONファイルからデータを取得 | |
fetch(url) | |
.then(function(response){ | |
return response.json(); | |
}) | |
.then(function(data){ | |
// JSON全体 | |
console.log(data); | |
// 個別に取り出す | |
console.log("name:" + data.name); | |
console.log("age:" + data.age); | |
console.log("sex:" + data.sex); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment