bnussman bnussman - 1 year ago 110
Javascript Question

JSON to HTML Table with JS No final output

I'm trying to add on to an html table with JS that gets info from a JSON file.
I can't find out why this wont show any data on the table.

JSON Example

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


My JS that is not working :(

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


New Issue!!!!



I have a php file that writes to the json file, when I try to use this script to add to the json file, it makes the json file not display.

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 after 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 Source

db.json (Please notice no semicolon at the end ) In your post you specify a semicolon at the end of json file.

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

If you are using this directly on javascript it will work fine with semicolon.

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"}];

In a json file semicolon is illegal. But in javascript semicolon is the valid end of line of code. When we are using $.getJSON() it will get the json file content and parse it. Since semicolon is an illegal character ; parsing will be failed.

Your javascript is fine. But the problem is date,message,votes are not found on the Json. I've checked and this is working

$(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);
            }
         });
            });

Solution to New Problem

are you sure $message and $votes get initialized properly.

    <?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);
    ?>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download