使用JS的JSON到HTML表没有最终输出

Question

我试图添加一个带有JS的html表来获取来自JSON文件的信息。 我无法找出为什么这不会在桌面上显示任何数据。

JSON示例

[{"User_Name":"John Doe","score":"10","team":"1"},
 {"User_Name":"Jane Smith","score":"15","team":"2"},
 {"User_Name":"Chuck Berry","score":"12","team":"2"}];

我的JS无效：（

<table class="table">
<thead>
    <tr>
        <th data-field="date">Date</th>
        <th data-field="message">Message</th>
        <th data-field="votes">Votes</th>
    </tr>
    <tr>
 <script type="text/javascript">
 window.onload = function(){
 $(document).ready(function () {
    $.getJSON("/crestdale/new/db.json", function(raw){
        console.log(raw);
    var json = raw;
    var tr;
    console.log(json);
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].date + "</td>");
        tr.append("<td>" + json[i].message + "</td>");
        tr.append("<td>" + json[i].votes + "</td>");
        $('table').append(tr);
    }
 });
    });
 };
 </script>
     </tr>
 </thead>
 </table>

新问题!!!!

我有一个写入json文件的php文件，当我尝试使用此脚本添加到json文件时，它会使json文件无法显示。

PHP

<?php 
date_default_timezone_set('America/new_york');
$message = $_POST['message'];
$date = date("F j, Y, g:i a"); 

$fp = fopen('db.json', 'r+');
// Loading existing data:
$json = file_get_contents("db.json");
$data = json_decode($json, true);

// Adding new data:
$data[3] = array('date' => $date, 'message' => $message, 'votes' => $votes);

 // Writing modified data:
 file_put_contents('db.json', json_encode($data, JSON_FORCE_OBJECT));


fclose($fp);



?>

PHP之后的JSON

{"0":{"User_Name":"John Doe","score":"10","team":"1"},"1":{"User_Name":"Jane Smith","score":"15","team":"2"},"2":{"User_Name":"Chuck Berry","score":"12","team":"2"},"3":{"date":"February 16, 2015, 11:06 pm","message":null,"votes":null}}

Answer 1

db.json（请注意最后没有分号）在你的帖子中，你在json文件的末尾指定一个分号。

[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]

如果您在javascript上直接使用它，它将以分号工作。

var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];

在json文件中，分号是非法的。但在javascript中，分号是代码行的有效结尾。当我们使用$ .getJSON（）时，它将获取json文件内容并解析它。分号是非法字符;解析将失败。

你的javascript很好。但问题是日期，消息，在Json上找不到投票。我已经检查了，这是有效的

$(document).ready(function () {
            $.getJSON("db.json", function(raw){
            var json = raw;
            var tr;
            console.log(json);
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].User_Name + "</td>");
                tr.append("<td>" + json[i].score + "</td>");
                tr.append("<td>" + json[i].team + "</td>");
                $('table').append(tr);
            }
         });
            });

解决新问题

你确定$ message和$ votes得到了正确的初始化。

    <?php 
         $date = date("F j, Y, g:i a"); 
         $message='new message';
         $votes=10;
         $contents = file_get_contents('db.json');
         $json  = json_decode($contents,true);
         $ar= array('date' => $date, 'message' => $message, 'votes' => $votes);
         array_push($json,$ar); 
         $newJson = json_encode($json);
         file_put_contents("db.json",$newJson);
    ?>