Javascriptでfetchがうまく動いてくれません。アドバイスいただけないでしょうか。

Question

Javascriptでfetchがうまく動いてくれません。アドバイスいただけないでしょうか。

ローカルのサーバー（php.7.2.24）では動いているのですが、xserverの環境(php.7.2.17)では動いてくれないので、困っております。なお、phpの環境の違いが原因であると断定しているわけではありません。ローカルでは動いてくれるのに、ｘサーバーにアップしたら動かなくなったというだけです。

phpの側でファイル書き出しする方は確実に動いており、copydata.jsonは正しく出力されているようです。

ですが、javascriptのexecPasteで読み込んだ
document.getElementById(pre1id).value = json.CT_Code;
に対して
TypeError: document.getElementById(...) is null
というエラーが出て、おかしな値がセットされてしまいます。

phpでファイル書き出しするもの

$obj = '{ "CT_Code": "' . $CT_Code . '", "CT_Item": "' . $CT_Item . '", "CT_Kikan": "' . $CT_Kikan . '", "CT_Email": "' . $CT_Email . '" }';
$data = json_decode($obj, true);

$filename = 'copydata.json';
$somecontent = $obj;
if (is_writable($filename)=== FALSE) {
echo "the file is not writable";
}
$json = fopen('copydata.json', 'w');
if ( fwrite($json, json_encode($data)) === FALSE) {
echo "Cannot write to file ($filename)";
exit;
}

Javascriptで読み込むもの

$("#execPaste").click(function () {
var pre1id = localStorage.getItem('pre1id'); //Storageから １つ前のフォーカス位置のｉｄ読み込み
var pre2id = localStorage.getItem('pre2id'); //Storageから ２つ前のフォーカス位置のｉｄ読み込み
var pre3id = localStorage.getItem('pre3id'); //Storageから ３つ前のフォーカス位置のｉｄ読み込み
result = pre1id.indexOf("Code");
if (result != -1) {
  pre2id = pre1id.substr(0, result);
  pre3id = pre1id.substr(0, result) + "MailAddress";
}

fetch("copydata.json")
  .then(response => response.json())
  .then(function (json) {
    document.getElementById(pre1id).value = json.CT_Code;
    document.getElementById(pre2id).value = json.CT_Item;
    document.getElementById(pre3id).value = json.CT_Email;
  });
});

１月２１日追記します。
以下のようにコンソール出力をさせました。

fetch("./copydata.json")
  .then(response => response.json())
  .then(function (json) {
    console.log(json);
    document.getElementById(pre1id).value = json.CT_Code;
    document.getElementById(pre2id).value = json.CT_Item;
    document.getElementById(pre3id).value = json.CT_Email;
  });

すると、コンソールには、以下のように書き出されます。

Object { CT_Code: "00029302008", CT_Item: "xxxxxxxxxxxxxxxx", CT_Kikan: "", CT_Email: "" }

これで実は期待どおりに動くのです。
ですが、phpの方でcopydata.jsonが書き換えられても、２回目以降のjavascriptでは、新しいcopydata.jsonの内容が反映されず、最初のデータのままなのです。そして、２回目以降は、

Object { CT_Code: "00029302008", CT_Item: "xxxxxxxxxxxxxxxx", CT_Kikan: "", CT_Email: "" }
TypeError: document.getElementById(...) is null

となります。

ちなみに、

$.getJSON("copydata.json", function (data) {
    //読み込んだdataに対する処理
    console.log(data);
    document.getElementById(pre1id).value = data.CT_Code;
    document.getElementById(pre2id).value = data.CT_Item;
    document.getElementById(pre3id).value = data.CT_Email;
});

というものも試しています。
１回目のcopydata.jsonのデータが反映され、エラーメッセージも全く同じ結果になります。

さらに追記します。
２回目のcopydata.jsonが反映されないので、キャッシュを読み込んでいるのかと疑い、キャッシュさせないようにするのと、ctrl+shift+rなどを試してみましたが、依然として最初のcopydata.jsonが反映されるようです。原因が違うのかもしれません。

さらに追記します。
xserverにもキャッシュ設定というものがあるということを発見したのですが、それもoffであることを確認しています。
社内ＬＡＮのサーバーにアクセスして実行するときちんと動きます。ブラウザをそのまま閉じることなく、別のタブにしてxserverにアクセスすると、とたんに動かなくなります。行ったり来たりしても、社内ＬＡＮでは動き、xserverでは動きません。
気にかけていただいた方、ありがとうございました。
初心者なので、情報提供もこの程度しか出来ません。

Comments

[dameo]

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
「fetch() から返される Promise は レスポンスが HTTP 404 や 500 を返して HTTP エラーステータスの場合でも拒否されません。代わりに (ok ステータスが false にセットされて) 正常に解決し、拒否されるのはネットワークのエラーや、何かがリクエストの完了を妨げた場合のみです。」
とあります。
大丈夫でしょうか？
というか、うまく動かないときは他人に聞く前に受け取ったデータを「全て」見てください。
最近のブラウザならネットワークのモニタリングも出来るので、どちらが悪いかは一目瞭然なはずなのに、そのデータがありません。

[m.ts10806]

htmlと、localstorageに書き込むところもご提示ください。
あとresponse後のjsonという変数には想定の情報は入っているのでしょうか。コンソール出力してご確認ください。

[bellevue]

ご指導ありがとうございます。こういったものを開発し始めてから半年ほどなので、dameoさんが教えてくださっているようなこと自体もまだ分かりません。申し訳ありません。localStorageに書き込むところ、追記してみます。jsonの内容について、追記しますので、お時間ありましたら、また見てください。

[dameo]

(1)よく分からないものを分からないまま使ってはいけません
(2)プログラムは全部書いてから間違っていることを少しずつ見つけて直す、のではなく、間違ってないことが分かっている部分を少しずつ増やすような形で書き進めてみてください。そうしないと全てを疑わないといけない分、問題に気付きにくくなり、バグだらけになってしまいます。
(3)恐らくChromeデベロッパーツールを使ってるということであれば、それを使いこなしてください。ググればデバッグの方法が分かります。phpも比較的手順が多めですが、デバッグ環境を構築できます。
(4)ネットワークで通信するようなケースでは、ブラウザのネットワークのモニタリングも効果的です。今回はHTTP(HTTPS)だと思うので、その知識さえあればより効率的に問題を発見できます。
(5)今回は違うと思いますが、タイミングに依存して稀に発生する再現性のない問題というのもありますが、そういうものは(コンソール以外にも)大量にログなどを出力することで追いかけることもあります。

自分で気付けないことは他人に聞くと早い事が多いですが、そもそも自分に「端折ってる」部分がある場合、そこが原因であることも多いです。まずはそこを疑いましょう。欲張らずに一歩一歩丁寧に進めてみてください。

[dameo]

あと、キャッシュを疑っているようですが、ネットワークモニタリングしてればキャッシュを使ってるかどうかも一目瞭然ですし、デベロッパーツールでキャッシュをdisableしておくことも出来ます。ただ、今回のように鯖側もいじれるケースではそもそもキャッシュの制御も自分の責任なので、効果的な設定にしておく必要があります。ただし主にその辺が問題になるのは、本番環境でのjavascriptやcssなどで、開発環境ではキャッシュ自体しないようにしておくのが一般的です。

[dameo]

「初心者なので、情報提供もこの程度しか出来ません。」はダメですよ。
また「環境が変わった程度で動かなくなり、その原因も分からない」は、プログラムのバグです。
現時点ではデバッグもネットワークモニタリングも出来ないのに異常系の実装が全くないのが一番の問題です。そして、私は、『うまく動かないときは他人に聞く前に受け取ったデータを「全て」見てください。』と言いました。全て見ていますか？

[dameo]

時間がないので、もう書いときます。
<script>
fetch("./copydata.json")
.then(response => {
console.log(response);
return response.json();
})
.then(function (json) {
console.log(json);
});
</script>

Answer 1

xserverで運用すると、キャッシュされてしまい、最新のcopydata.jsonが反映されませんでした。
見よう見まねで申し訳ありませんが、以下のように明示的にno-cacheを入れることで解消できました。

        fetch("./copydata.json",{
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            "Content-Type": "application/json; charset=utf-8",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
                redirect: "follow", // manual, *follow, error
        referrer: "no-referrer" // no-referrer, *client
        })
                .then(response => {
                    console.log(response);
                    return response.json();
                })
                .then(function (json) {
                    console.log(json);
                    document.getElementById(pre1id).value = json.CT_Code;
                    document.getElementById(pre2id).value = json.CT_Item;
                    document.getElementById(pre3id).value = json.CT_Email;
                });

Answer 2

解決しました。気にかけていただけた方、ありがとうございました。

document.getElementById(pre1id).value = response.json.CT_Code;
document.getElementById(pre2id).value = response.json.CT_Item;
if (resultall != -1) {
  document.getElementById(pre3id).value = response.json.CT_Email
}

実は、CT_Emailというのは、テーブル内のフィールドとして存在する場合と存在しない場合があります。あってもなくても代入する処理をしておりました。それでも、社内のサーバーは残りの処理をしてくれていました。ですが、エックスサーバーは無いはずのフィールドにデータを入れようとする処理が存在すると、動いてくれないようでした。
また、最初に読み込んだものしか反映されないということは、バッファを疑いましたが、バッファの問題ではなく、同じ原因を引き金として、読み込まないということでした。
対策として、フィールドがないとき（resultall != -1）には、代入させないように処理を分けてやることで、全体が正常に動きました。
dameoさん、いろいろありがとうございました。プログラマーの仕事は私の仕事のなかの１％にもみたないごくわずかな部分です。大事ではあるのですがなかなかきちんとした勉強はできません。おっしゃることはもっともだと思いますので、少しずつですが、正道を目指していこうと思います。

Answer 3

localstorageから読み出さずに、スタティックにhtml上のidを
指定して動くことを確認してください。
それで問題ないならlocalstrageへの投入がただしく行われていないということです

Comments

[yambejp]

copydata.jsonをphpで書いているのと、
jsで同ファイルを指定しているのは直接的になんの関係もありません。
今回の件はphpは忘れて問題ないでしょう

[bellevue]

ご指導ありがとうございます。