質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

380閲覧

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

tajix_japan

総合スコア132

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/09/02 11:30

編集2020/09/02 11:32

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

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

外部サーバーphp
data.php

php

1 2<?php header("Access-Control-Allow-Origin: *"); ?> 3 4[ 5 { 6 "id": "1", 7 "name": "青木優位", 8 "email": "sth0@s.com", 9 "gender": "男性" 10 }, 11 { 12 "id": "2", 13 "name": "霧島隆", 14 "email": "kirisima@u.gov", 15 "gender": "男性" 16 }, 17 { 18 "id": "3", 19 "name": "中島智子", 20 "email": "nakajima@u.gov", 21 "gender": "女性" 22 }, 23 { 24 "id": "4", 25 "name": "鈴木洋子", 26 "email": "suzuki@u.gov", 27 "gender": "女性" 28 }, 29 { 30 "id": "5", 31 "name": "佐藤隆", 32 "email": "satou@u.gov", 33 "gender": "男性" 34 } 35] 36

表示のHTML (javascript)

javascript

1 2<script> 3 4fetch("https://examole.com/data.php") 5.then(function (response) { 6 7//2 : jsonメソッドでJSON形式にして返す 8 return response.json(); 9}).then(function (myjson) { 10 11//3:json形式のデータをWebページに出力する 12 makeTable(myjson); 13}); 14 15function makeTable(jsonlist) { 16 var table_wrap = document.getElementById("json_disp"); 17 var table = "<table>"; 18 table += "<th>ID</th><th>名前</th><th>性別</th><th>EMAIL</th>"; 19 //------------ 20 for (var i = 0; i < jsonlist.length; i++) { 21 var linedata = jsonlist[0]; 22 table += "<tr>"; 23 table += "<td>" + jsonlist[i].id + "</td>" + "<td>" + jsonlist[i].name + "</td>" + "<td>" + jsonlist[i].gender + "</td>" + "<td>" + jsonlist[i].email + "</td>"; 24 table += "</tr>"; 25 } 26 //----------- 27 table += "</table>"; 28 //要素に追加 29 table_wrap.innerHTML = table; 30} 31</script> 32

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

と出てきています。

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どこを修正すればいいか

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

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

javascript

1window.addEventListener("DOMContentLoaded", ()=>{ 2 3 // ここで fetch() 4 5});

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

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

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

投稿2020/09/02 13:32

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tajix_japan

2020/09/03 00:38

有難うございます。 >ブラウザがDOM操作できない状態でDOM操作したのが原因 このご指摘で理解できました。 単純に <div id="json_disp"></div> を追加することで表示できました。 ご教示有難うございました。 深く御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問