Written by Kasumi

JavaScriptでJSONデータを読み込み・HTMLへ出力する方法

JavaScriptを使ってJSONデータを読み込み。

HTMLに出力したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

JSONデータサンプル

[
    {
        "name": "佐藤",
        "school_year": 1,
        "test": {
            "japanese": 30,
            "english": 60
        }
    },
    {
        "name": "鈴木",
        "school_year": 2,
        "test": {
            "japanese": 40,
            "english": 70
        }
    },
    {
        "name": "田中",
        "school_year": 3,
        "test": {
            "japanese": 50,
            "english": 80
        }
    }
]

本記事で扱うjsonデータサンプルです。

上記をJavaScriptを使って読み込みします。

JSONデータを読み込むJavaScriptコード

// XMLHttpRequestを使ってjsonデータを読み込む
let requestURL = 'data.json';//jsonへのパス
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

// JSONデータをJavaScriptオブジェクトに変換
request.onload = function () {
  let data = request.response;
  data = JSON.parse(JSON.stringify(data));
  dataArray(data);
}

// foreachでJSONデータをHTMLに出力
function dataArray(els) {
  // JSONデータを出力したいHTML要素を指定
  let array = document.querySelector('.array');
  els.forEach(el => {
    let name = el.name;
    let school_year = el.school_year;
    let japanese = el.test.japanese;
    let english = el.test.english;
    let code = '<ul>'+
    '<li>名前:' + name + '</li>'+
    '<li>学年:' + school_year + '年</li>'+
    '<li>国語:' + japanese + '点</li>'+
    '<li>英語:' + english + '点</li>'+
    '</ul>';
    array.insertAdjacentHTML('beforeend',code);
  });
}

JSONデータを読み込むJavaScriptコード例です。

まず最初に、XMLHttpRequestを使ってJSONデータを実装環境に読み込ます。

requestURL変数にJSONデータへのパスを入れてください。

次にJSON.parse()を使い、JSONデータをJavaScriptオブジェクト形式に変換します。

これでJavaScriptでJSONデータを扱えるようになりました。

配列と同じくforEach等を使い、データをループで取り出します。

取り出したデータをHTMLタグ内に格納。

insertAdjacentHTMLで指定したHTML要素の中に出力します。

以上でJSONデータの読み込み・HTMLヘの出力が完了です。

まとめ

JavaScriptでJSONデータを読み込み・HTMLへ出力する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでHTMLの埋め込む場所を指定する方法

2022.10.17
176
JavaScript

JavaScriptでマウスが要素をhoverしたか判定する方法

2022.11.10
140
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
264
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
338