phpの配列をjavascriptの変数として使いたい

コード
```### 前提・実現したいこと
phpとjavascriptを用いて現在の位置情報を「geolocationapi」から取得し
dbに登録した座標（緯度経度）を用いて距離を算出し一番近いものを表示するというプログラムを作成しています

### 発生している問題・エラーメッセージ
現在地の取得->javascript
座標から距離を算出する->javascript
mysqlとの接続->php

で書いています。
mysqlから取得した配列をjsの変数として使えるようにすることができない

エラーメッセージ


### 該当のソースコード
```php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>距離計算</title>
    <style></style>
</head>
<body>
    <?php
        //MySQLのデータベースサーバへ接続（サーバ名，接続ユーザ名，パスワード，データベース名 の順に指定）
        $link=mysqli_connect("localhost","root","","coordinate");

        //SQL文を指定
        $query="SELECT * FROM location";

        //PHPからSQL文を実行（接続名 $link に対して $query のSQL文を実行）
        //結果は$resultに格納される
        $result=mysqli_query($link,$query);

        //$result から1行取り出して，1項目ごとに配列 $row (フィールド名をキーとした連想配列)に格納
        $row=mysqli_fetch_assoc($result);

        //このrow配列をjs側に渡したい
        //$row 配列の中身を表示
        echo "場所：".$row['place']."<br>";
        echo "緯度：".$row['latitude']."<br>";
        echo "経度：".$row['longitude']."<br>";
　　　　 $json_row = json_encode($row)
    ?>

<script>
    //ユーザーの現在の位置情報を取得
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

    // ユーザーの現在の位置情報を取得 
function successCallback(position) {
  const latitude1 = position.coords.latitude
  const longitude1 = position.coords.longitude
  let   coord = <?php echo $json_row;?>
  const latitude2 =  coord[1];
  const longitude2 =  coord[2];
  //const latitude2 =  35.4349408
  //const longitude2 = 139.339615

  const latitude3 = 35.480947
  const longitude3 = 139.321024
  var gl_text = "緯度：" + latitude1 + "<br>";
    gl_text += "経度：" + longitude1 + "<br>";
    const dis1 = distance(latitude1,longitude1,latitude2,longitude2)
    const dis2 = distance(latitude1,longitude1,latitude3,longitude3)
    gl_text += "駅までの距離 :" +dis1+"<br>"
    gl_text += "運動公園までの距離 :" +dis2+"<br><br>"
    if (compare(dis1,dis2)==1){
      gl_text += "運動公園のほうが近いです<br>"
    }
    else {
      gl_text += "駅のほうが近いです<br>"
    }
  document.getElementById("show_result").innerHTML = gl_text;

}

function compare (dis1,dis2){
  if ((dis1-dis2)>0){
    return 1
  }
  else 
  return 2
}

//2点間の距離計算
function distance(lat1,lng1,lat2,lng2){
    const R = Math.PI / 180
    lat1*=R;
    lng1*=R;
    lat2*=R;
    lng2*=R;
    return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
}

// 位置情報が取得できない場合
function errorCallback(error) {
  var err_msg = "";
  switch(error.code)
  {
    case 1:
      err_msg = "位置情報の利用が許可されていません";
      break;
    case 2:
      err_msg = "デバイスの位置が判定できません";
      break;
    case 3:
      err_msg = "タイムアウトしました";
      break;
  }
  document.getElementById("show_result").innerHTML = err_msg;
}
</script>
    <p>あなたの現在位置</p>
    <div id="show_result"></div>
</body>
</html>

試したこと

json_encode

補足情報（FW/ツールのバージョンなど）

xampp contorol panel v3.2.4

ここにより詳細な情報を記載してください。

###ブラウザのページのソース表示結果

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>距離計算</title>
    <style></style>
</head>
<body>
    場所：honnatugi-staton<br>緯度：35.4349408<br>経度：139.339615<br>
<script>
    //ユーザーの現在の位置情報を取得
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

    // ユーザーの現在の位置情報を取得 
function successCallback(position) {
  const latitude1 = position.coords.latitude
  const longitude1 = position.coords.longitude
  let   coord = <br />
<b>Notice</b>:  Undefined variable: json_row in <b>C:\xampp\htdocs\セミナー\showtable.php</b> on line <b>38</b><br />
 
  console.log(coord["latitude"]);
  console.log(coord["longitude"]);
  //const latitude2 =  35.4349408
  //const longitude2 = 139.339615
  
  const latitude3 = 35.480947
  const longitude3 = 139.321024
  var gl_text = "緯度：" + latitude1 + "<br>";
    gl_text += "経度：" + longitude1 + "<br>";
    const dis1 = distance(latitude1,longitude1,coord["latitude"],coord["longitude"])
    const dis2 = distance(latitude1,longitude1,latitude3,longitude3)
    gl_text += "駅までの距離 :" +dis1+"<br>"
    gl_text += "運動公園までの距離 :" +dis2+"<br><br>"
    if (compare(dis1,dis2)==1){
      gl_text += "運動公園のほうが近いです<br>"
    }
    else {
      gl_text += "駅のほうが近いです<br>"
    }
  document.getElementById("show_result").innerHTML = gl_text;
  
}

function compare (dis1,dis2){
  if ((dis1-dis2)>0){
    return 1
  }
  else 
  return 2
}
//2点間の距離計算
function distance(lat1,lng1,lat2,lng2){
    const R = Math.PI / 180
    lat1*=R;
    lng1*=R;
    lat2*=R;
    lng2*=R;
    return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
}

// 位置情報が取得できない場合
function errorCallback(error) {
  var err_msg = "";
  switch(error.code)
  {
    case 1:
      err_msg = "位置情報の利用が許可されていません";
      break;
    case 2:
      err_msg = "デバイスの位置が判定できません";
      break;
    case 3:
      err_msg = "タイムアウトしました";
      break;
  }
  document.getElementById("show_result").innerHTML = err_msg;
}
</script>
    <p>あなたの現在位置</p>
    <div id="show_result"></div>
</body>
</html>

m.ts10806

2021/11/24 10:53

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/11/24 10:54

coord の内容は確認されたのでしょうか。 console.logなど。でなくてもブラウザの「ソースを表示」から確認できそうに思いますが。

hahaha44444

2021/11/24 13:40

jsで受け取るための let coord = <?php echo $json_row;?> を記載すると、show_resultで行っている表示ができなくなります

m.ts10806

2021/11/24 20:07

ブラウザの「ソースを表示」から生成された文字列を確認してください。

hahaha44444

2021/11/25 07:04

ソースの表示から確認できませんでした

m.ts10806

2021/11/25 08:09

何をどう確認してどうなってたのでしょうか。

hahaha44444

2021/11/25 10:56

ブラウザのページのソースを表示をしましたが生成された文字列の項目が見つかりませんでした

行動規範の内容に同意します

回答2件

たぶんJavaScript側の参照の仕方が間違ってます。

php
1<?php
2$row["place"] = "aaaa";
3$row["latitude"] = "123";
4$json_row = json_encode($row)
5?>
6let   coord = <?php echo $json_row;?>
7/***
8let   coord = {"place":"aaaa","latitude":"123"}
9***/

となるので、

js
1let   coord = {"place":"aaaa","latitude":"123"}
2console.log(coord[0]); //undefined
3console.log(coord["place"]); //"aaaa"
4console.log(coord.place); //"aaaa"
5

投稿2021/11/24 20:12

m.ts10806

総合スコア80890

hahaha44444

2021/11/25 06:48

これではjavascript側でcoordを宣言していることにはならないのでしょうか

m.ts10806

2021/11/25 08:09

質問の意図や背景がわかりかねます。

hahaha44444

2021/11/25 11:02

phpでmysqlから値を取得したものを javascriptで受け取り計算し、ブラウザに表示するというものを作っています現在phpで宣言している$rowには値が入っているので javascriptで$rowを受け取りたいと考えています

m.ts10806

2021/11/25 11:15

PHPの仕事は画面への出力までで、それがHTMLやJavaScriptとして正しく認識できる内容になっていれば問題ありません。もちろん、「PHPの出力ができる」ことが条件なのでPHPが動作する状況（.phpであること、とか）である必要はあります。ひとまず、ブラウザの「ソースを表示」の結果も追記してもらえますか？

hahaha44444

2021/11/25 11:33

追加させていただきました

m.ts10806

2021/11/25 11:36

同じファイルに全てのコードがありますか？あと、ここに全角スペースが沢山入ってますが、これは？ →　　　　 $json_row = json_encode($row) Syntax errorになりそうですけどね。

hahaha44444

2021/11/25 12:13

calc.phpというファイルにすべて書いています全角スペースは修正しました。

m.ts10806

2021/11/25 20:10

>全角スペースは修正しました。提示のコードはそのままのようですが（あと、PHPのコードとブラウザに出て居るソースが整合性取れてません）。いずれにしても変数未定義のNoticeが出てるので、起きてる現象と対応は明白です。 let coord = <?php echo $json_row;?> ↑この時点で$json_rowという変数が見えてないということです。

hahaha44444

2021/11/30 11:51 編集

phpのrow配列をjavascriptに渡せていないという解釈であってますか？

行動規範の内容に同意します