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

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
4530
JavaScript

JavaScriptで配列を複製。新しい配列を作成する方法【mapメソッドを使おう】

2023.01.09
815
JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

更新日:2022.09.09
467
JavaScript

Javascriptでvideoタグのオプションを設定

更新日:2019.11.28
751