【JavaScript】Ajaxを使ってJSONデータを受信しよう
こんばんは。今日も雨が振りましたね。
ただ秋に突入しだんだんと過ごしやすい気候になってきました。
さて、今日は少し難しいのですがAjax通信を用いたコードを展開します。
まず2つファイルを用意します。(コピペしてお試しください)
cakes.json
[
{
"name": "ショートケーキ",
"price": "300円"
},
{
"name": "チョコレートケーキ",
"price": "400円"
},
{
"name": "ミルクレープ",
"price": "500円"
}
]
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output"></div>
<!-- ここに、JavaScriptを記述します -->
<script>
const getLocations = () => {
return new Promise(function (resolve) {
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(result);
}
}
})
}
getLocations().then(function(locations) {
let html = '';
for (let i=0; i<locations.length; i++) {
html += locations[i].name + '/' + locations[i].address
+ '<br>'
}
document.getElementById('output').innerHTML = html;
})
</script>
</body>
</html>
上記が完成版のコードです。
<div id="output"></div>
<!-- ここに、JavaScriptを記述します -->
<script>
const getLocations = () => {
return new Promise(function (resolve) {
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(result);
}
}
})
}
一つずつ見ていくとここでは変数urlを定義しcakes.jsonファイルを格納します。
そしてそれ以降はAjax通信を始めるにあたっての決まり文句となりますのでここでは解説を割愛いたします。
getcakes().then(function(cakes) {
let html = '';
for (let i=0; i<cakes.length; i++) {
html += cakes[i].name + '/' + cakes[i].address +
'<br>'
}
document.getElementById('output').innerHTML = html;
})
</script>
そしてAjax通信のgetcakes()関数を実行し各種データをfunction(cakes)に格納します。
そしてデータの個数分だけfor文を回し変数htmlに格納します。
これでブラウザを見るとケーキと金額が個数分出ていると思います。Ajax通信は複雑で分かりづらいのですが是非試してみてください＼(^o^)／
ファイル管理にお困りのリモートワーカーへ【Web-luck（ウェブ・ラック）】 
