phpファイルをjavascriptで読み込みたいです

Question

〇前提・実現したいこと
html＋javascriptでログイン画面を作成（ネット上で拾ったものを少し加工）しました。
ユーザー名とパスワード入れるとアカウント毎に次の画面へ遷移するものです。
ここに含まれる、ユーザー名とパスワードをphpファイルに分離したいです。

〇発生している問題・エラーメッセージ
phpファイルに分離後、ログインすると次のページへ遷移しなくなります。
javascriptからphpファイルへの読み込みが上手くいきません。

〇該当のソースコード（抜粋です。意図通り動作します。）

  <script>
    var users = [
      {'name': 'user',  'password_hash': 'pass' },
      {'name': 'usr2', 'password_hash': 'pas2'}
    ];
    var length = users.length;

    $("input[type=submit]").click(function(event) {

        event.preventDefault();

        var user = $("input[type='text']").val();
        var password = $("input[type='password']").val();
        var is_error = true;

        $("input[type='password']").val("");

        for (var i = 0; i < length; ++i) {

            if (user === users[i].name && password === users[i].password_hash) {
                $("p#welcome").html("ようこそ、" + user + "さん");
                $("input[type='text']").val("");
                $("p#error_message").html("");
　　　		　　　location.href = user + password + ".html";
                is_error = false;
                break;
            }

        }

        if (is_error) {
            $("p#error_message").html("ユーザー名もしくはパスワードが正しくありません。");
        }
    });
  </script>

〇自分で調べたことや試したこと
・以下のphpファイルを作成しました。（ファイル名：users.php）

<?php
header("content-type: text/javascript");
$users = [
      {'name': 'user',  'password_hash': 'pass' },
      {'name': 'use2', 'password_hash': 'pas2'}
    ];
$users = json_encode($users);
?>

・javascript側で下記を削除/追加しました。
・削除

var users = [
      {'name': 'user',  'password_hash': 'pass' },
      {'name': 'usr2', 'password_hash': 'pas2'}
   ];

・追加

　<script src="users.php"></script>
    var users = JSON.parse('<?php echo $users; ?>');

プログラミング経験が乏しく、本を読んだり、ネットで検索しましたが解決できませんでした。ご協力を宜しくお願い致します。

Answer 1

users.phpをJavaScriptとして読み込ませているのでしたら、何も出力がないので空になっていると思いますし、
PHPタグ（<?php ?>）は基本.php内でしか使えません。

なので、「JavaScriptのコードとして出力した上で、使う」感じでしょうか。

<?php
header("content-type: text/javascript");
$users = [
      {'name': 'user',  'password_hash': 'pass' },
      {'name': 'use2', 'password_hash': 'pas2'}
    ];
?>
const users = <?php echo json_encode($users); ?>;

<script src="users.php"></script>
<script>
  console.log(users );
</script>

Comments

[sansho]

早速のご回答ありがとうございます。
console.logでデバックができるのですね。勉強になります。
どうやったらデバックができるのだろうと思っていました。
調べたところJSONというのは、配列は"name": "user"のようにダブルクォートで囲まなければいけないのですね。引用元：https://www.tohoho-web.com/ex/json.html
user.phpファイルの配列の文字列""で囲みました。問題解決には至りませんでしたが、一歩前進したように思います。ありがとうございます。

[m.ts10806]

JavaScriptのデバッグ
https://ics.media/entry/190517/
PHPのデバッグ
https://techplay.jp/column/571

>user.phpファイルの配列の文字列""で囲みました。

json_encodeの出力内容って正しいJSON文字列になるので囲う必要はないと思います。
よく見たら$users作るところで間違ってますね。
ちゃんとPHPの連想配列作りましょう。
$users = [
['name'=> 'user', 'password_hash'=>'pass' ],
['name'=> 'use2', 'password_hash'=>'pas2' ]
];