Skip to content

Instantly share code, notes, and snippets.

@mrgarita
Created Oct 5, 2022
Embed
What would you like to do?
JSON読み込み基本 新しい方法を更に簡潔に記述(fetch)
{
"name": "Alice",
"age": 13,
"sex": "female"
}
<!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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment