みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

回答受付中の質問

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>

投稿日時 - 2018-11-07 15:34:47

QNo.9555465

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

私も勉強をかねて少し試してみましたが、
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>

投稿日時 - 2018-11-13 00:08:45

あなたにオススメの質問