【javascript】jsonファイルデータを取得して、html画面へ表示する

1.jsonファイルを準備する

[
    {
        "municipalityCode": 10006,
        "prefectures": "北海道",
        "prefecturesKana": "ホッカイドウ"
    },
    {
        "municipalityCode": 20001,
        "prefectures": "青森県",
        "prefecturesKana": "アオモリケン"
    },
    {
        "municipalityCode": 30007,
        "prefectures": "岩手県",
        "prefecturesKana": "イワテケン"
    },
（略）
]

jsonファイルのサンプルをダウンロード

jsonファイルをつくるところからやりたい方はこちらをご参考下さい。
https://zenn.dev/saru_no_note/articles/1d97814510bb9c

2.htmlファイルに出力先のタグ記述する

<ul id="addhtml"></ul>

3.javascriptを記述する

const jsonFile = './json/data.json'; // JSONファイルのパス

document.addEventListener('DOMContentLoaded', () => {
  fetch(jsonFile)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Failed to fetch ${jsonFile}. HTTP Status: ${response.status}`);
      }
      return response.json();
    })
    .then(array => {
      const addHtml = document.getElementById('addhtml');
      if (!addHtml) {
        console.error('Error: Element with ID "addhtml" not found.');
        return;
      }

      addHtml.innerHTML = '';

      // リストアイテムを生成
      array.forEach(obj => {
        const li = document.createElement('li');
        
        // 各プロパティを追加
        const municipalityCode = document.createElement('span');
        municipalityCode.textContent = obj.municipalityCode || '団体コード';

        const prefectures = document.createElement('span');
        prefectures.textContent = obj.prefectures || '都道府県名（漢字）';

        const prefecturesKana = document.createElement('span');
        prefecturesKana.textContent = obj.prefecturesKana || '都道府県名（カナ）';

        // 各要素をリストアイテムに追加
        li.appendChild(municipalityCode);
        li.appendChild(prefectures);
        li.appendChild(prefecturesKana);

        // リストアイテムをDOMに追加
        addHtml.appendChild(li);
      });
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

4.各ファイルの配置場所

├ index.html
├ js/
│　└ ○○.js
└ json/
　└ data.json

5.サンプル

https://saru-no-okiba.github.io/json_sample_1/

https://github.com/saru-no-okiba/json_sample_1
より一式ダウンロードして、自分でいじってみてください。