- 締切済み
HTML内部のJavascriptの記述について
webに遅延情報を記載するHTMLを作成しているのですがJavascriptの結果が表示されません当方まだ学習中であり初歩的なミスなどあるかもしれませんがよろしくお願いいたします。 <!DOCTYPE html> <html> <head> </head> <body> <h1>遅延情報</h1> <script language="JavaScript"> function (){ var json = JSON.parse(UrlFetchApp.fetch("https://rti-giken.jp/fhc/api/train_tetsudo/delay.json").getContentText()); var data1 = [ {nam:"豊肥本線",compan:"JR九州"}, {nam:"横浜線",compan:"JR西日本"}, ] var lind =""; data1.forEach( function( value ) { var nam=value.nam; var compan=value.compan; json.forEach( function( value ) { var name=value.name; var company=value.company; if(nam === name && compan === company){ lind='周辺の鉄道が遅延しています'; } }); }); if(!lind) { lind='遅延情報はありません'; } document.write(lind); } </script> </body> </html>
- tien123
- お礼率50% (3/6)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- togurin
- ベストアンサー率45% (81/180)
私も勉強をかねて少し試してみましたが、 Google Apps ScriptとJavaScriptの使い方が混同していると思います。 （Google Apps Scriptは私もよくわかりませんが。) 純粋にJavaScriptのみでなるべく原型を残しつつ書き直して見ました。 まず、単純にfunctionに名前もなく、functionを呼び出してもいないのでこれではなにも実行されません。書き直したものはfunction名をrunとしてrun()で呼び出しています。 また、URLからJSONファイルを取得しようとしているので、クロスドメインの制約で単にHTMLファイルをブラウザで開くだけでは動きません。実際にサーバーにHTMLファイルを置いてみないとわかりません。URLで指定されているJSONファイルをローカルに保存してテストした限りでは動きました。 学習中との事でしたらfetch関数（とPromiseの関係）,クロスドメイン,CORS,fuction名(無名関数：forEachの後のfunctionには名前がなくて良い）あたりを調べないと何をしているのか分からないかもしれませんのでそこも調べてみてください。 あと動かない時などはChromeのデベロッパーツールなどを使いデバックしないとどこが間違っているのか判断するのが難しいと思います。 そのあたりの言葉も調べてみてください。 間違ってたらすみません。 <!DOCTYPE html> <html> <head> </head> <body> <h1>遅延情報</h1> <script language="JavaScript"> function run() { fetch("https://rti-giken.jp/fhc/api/train_tetsudo/delay.json") .then(function (res) { return res.json() }) .then(function (json) { var data1 = [ { nam: "豊肥本線", compan: "JR九州" }, { nam: "横浜線", compan: "JR西日本" } ] var lind = ""; data1.forEach(function (value) { var nam = value.nam; var compan = value.compan; json.forEach(function (value) { var name = value.name; var company = value.company; if (nam === name && compan === company) { lind = '周辺の鉄道が遅延しています'; } }); }); if (!lind) { lind = '遅延情報はありません'; } document.write(lind); }); } run(); </script> </body> </html>
