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

JSON to HTML Table with JS No final output

本文关键字：输出 HTML JS JSON 带有      更新时间：2023-12-16

我正试图用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>

新一期

我有一个php文件可以写入json文件，当我尝试使用此脚本添加到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}}

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);
    ?>
相关文章：