jQueryなどのライブラリを使うともっと記述は減らせますが、あえて使いたくないときは以下のように書きます。
XMLHttpRequestはJSONも対応しているため、JSONの配列要素を取得して表示します。
実行結果はこちら
まず、出力先のHTMLはこちら
<ul id="demo_res"></ul>
JSはこちら
const xhr = new XMLHttpRequest();
// リクエスト方法とリクエスト先を設定
xhr.open("GET", 'https://www.kipure.com/trial/js/test.json');
//リクエスト送信
xhr.send();
// 自動的に呼ばれる関数
xhr.onreadystatechange = function () {
// readyState XMLHttpRequest の状態 4: リクエストが終了して準備が完了
// status httpステータスの状態200： 正常通信完了
if (xhr.readyState == 4 && xhr.status == 200) {
// jsonをオブジェクトに変更
const data_arr = JSON.parse(xhr.responseText);
let res = [];
for (var i = 0; i < data_arr.left_post_list.length; i++) {
res.push('<li class="demo_item">' + data_arr.left_post_list[i].post_title + '</li>');
if (i == 10) {
break;
}
}
document.getElementById("demo_res").innerHTML = res.join('');
}
}
