PHPとjpGridでテーブルを作成

前提・実現したいこと

PHPでMySQLから取得したテーブルをjpGridに表示するシステムを作っています。

上記の機能を実現したいと考えています。
初めての質問で不備不足があるとは思いますがよろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージは出ていないのですが、jq gridが表示されません。

憶測ですが、PHPとjqery間の値の受け渡しがうまく動いていないと考えています。

該当のソースコード

PHP
1
2<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
3<script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>
4<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-ja.js"></script>
5<script type="text/javascript" src="../js/jqgrid/js/jquery.jqGrid.min.js"></script>
6
7<html>
8    <head>
9        <title>jqgridサンプル</title>
10        <link rel="stylesheet" type="text/css" href="../js/jquery-ui/jquery-ui.css">
11        <link rel="stylesheet" type="text/css" href="../js/jqgrid/css/ui.jqgrid.css">
12        <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
13        <script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>
14        <script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-ja.js"></script>
15        <script type="text/javascript" src="../js/jqgrid/js/jquery.jqGrid.min.js"></script>
16
17<?php
18 
19//DBからデータを取得
20$pdo = new PDO("mysql:host=localhost;dbname=sample;charset=utf8;","root","root");
21$stmt = $pdo->query("select * from fruits order by id");
22 
23$json_data = array();
24$i = 0;
25while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
26    $json_data[$i] = $row;
27    $i++;
28}
29$json_array=json_encode($json_data);
30?>
31 <script type="text/javascript">
32   let js_array  = <?php echo  $json_array;  ?>
33            $(function(){
34                $("#tbl1").jqGrid({
35                     data: js_array
36                    ,datatype: "local"
37                    ,colNames:["id", "名前", "価格"]
38                    ,colModel:[ {name:"id"}
39                               ,{name:"name"}
40                               ,{name:"price"}
41                     ]
42                    ,width: "auto"
43                    ,height: "auto"
44                    ,'loadError' : function (xhr, status, error){
45                        alert(error);
46                    }
47                });
48            });
49        </script>
50    </head>
51    <body>
52        <table id="tbl1"></table>
53    </body>
54</html>
55
56
57```MySQL
58
59mysql> select * from fruits;
60+----+--------+-------+
61| id | name   | price |
62+----+--------+-------+
63|  1 | banana |   100 |
64|  2 | apple  |    50 |
65|  3 | orange |    30 |
66+----+--------+-------+
67