javascript のFetchで配列をWEB上に表示したい

Question

javascript のFetchを使い、別サーバーにあるjson表示のファイルの中身をweb上で表示したいと思います。

「json表示のファイル(外部サーバーphp)」、および表示側の「javascript のFetchファイル」は下記のとおりです。

外部サーバーphp
data.php

<?php header("Access-Control-Allow-Origin: *"); ?>

[
  {
    "id": "1",
    "name": "青木優位",
    "email": "[e-mail]",
    "gender": "男性"
  },
  {
    "id": "2",
    "name": "霧島隆",
    "email": "[e-mail]",
    "gender": "男性"
  },
  {
    "id": "3",
    "name": "中島智子",
    "email": "[e-mail]",
    "gender": "女性"
  },
  {
    "id": "4",
    "name": "鈴木洋子",
    "email": "[e-mail]",
    "gender": "女性"
  },
  {
    "id": "5",
    "name": "佐藤隆",
    "email": "[e-mail]",
    "gender": "男性"
  }
]

表示のHTML (javascript)

<script>

fetch("https://examole.com/data.php")
.then(function (response) {
 
//2 : jsonメソッドでJSON形式にして返す
  return response.json();
}).then(function (myjson) {
 
//3:json形式のデータをWebページに出力する
  makeTable(myjson);
});
 
function makeTable(jsonlist) {
  var table_wrap = document.getElementById("json_disp");
  var table = "<table>";
  table += "<th>ID</th><th>名前</th><th>性別</th><th>EMAIL</th>";
  //------------
  for (var i = 0; i < jsonlist.length; i++) {
    var linedata = jsonlist[0];
    table += "<tr>";
    table += "<td>" + jsonlist[i].id + "</td>" + "<td>" + jsonlist[i].name + "</td>" + "<td>" + jsonlist[i].gender + "</td>" + "<td>" + jsonlist[i].email + "</td>";
    table += "</tr>";
  }
  //-----------
  table += "</table>";
  //要素に追加
  table_wrap.innerHTML = table;
}
</script>

結果
表示されません。
コンソールでは 「 table_wrap.innerHTML = table;」の行のエラーとして
Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null

と出てきています。

どこを修正すればいいかご教示願います。

よろしくお願いいたします。

Answer 1

どこを修正すればいいか

ご質問の内容からですと、とりあえずは次のいずれかです。

• script タグを書く位置
• WindowイベントDOMContentLoaded or load

window.addEventListener("DOMContentLoaded", ()=>{

  // ここで fetch()
 
});

---

コードを遡る
null に innerHTML というプロパティは無い（値をセットできない）ということですので、
var table_wrap = document.getElementById("json_disp") で得た結果
table_wrap は null であることがメッセージに示されています。

このことから、ブラウザがDOM操作できない状態でDOM操作したのが原因でエラーになっていることが分かります。

Windowイベント - 「ロード・アンロードイベント」セクション
このページに示されるすべてのプロパティ、メソッド、イベントは覚えるまで、毎回確認してください。

Comments

[tajix_japan]

有難うございます。
>ブラウザがDOM操作できない状態でDOM操作したのが原因

このご指摘で理解できました。

単純に
<div id="json_disp"></div>

を追加することで表示できました。

ご教示有難うございました。

深く御礼申し上げます。