JSON to HTML Table with JS 没有最终输出

Question

我正在尝试使用从 JSON 文件获取信息的 JS 添加到 html table。我无法找出为什么这不会在 table 上显示任何数据。

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);



?>

JSON 在 PHP

之后

{"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（请注意末尾没有分号）在您的 post 中，您在 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);
    ?>

JSON to HTML Table with JS 没有最终输出

JSON to HTML Table with JS No final output

html

javascript

json

html-table

新刊！！！

新问题的解决方案