JavaScriptでのAJAXを介したJSONの取得
サーバーがデータをJSON形式で返すのは一般的な方法です。 これの扱い方を見てみましょう。サーバーに次のファイルがあるとします:
{
"num1": "1",
"num2": "2"
}
このファイルからデータを取得してみましょう:
button.addEventListener('click', function() {
fetch('/data.json').then(response => {
return response.text();
}).then(data => {
console.log(JSON.parse(data));
});
});
jsonメソッドを利用すると、JSONが自動的にJavaScriptの構造に変換されます:
button.addEventListener('click', function() {
fetch('/data.json').then(response => {
return response.json();
}).then(data => {
console.log(data);
});
});
サーバーが配列を含むJSONを返すとします。
この配列をループで処理し、各要素を個別のliに書き込んでください。