Running the Gantt chart framework with NodeJS. Been following the tutorial on setting up the app.
The database connection is fine, can console log the rows data from server.js.
The problem is that it does not populate the interface in the browser. An error message pops up saying “Invalid data” and the browser console shows:
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data dhtmlxgantt.js:7872:13
This is what the code looks like:
server.js
const express = require(‘express’);
const bodyParser = require(‘body-parser’);
const path = require(‘path’);
require(“date-format-lite”);
const port = 5000;
const app = express();
const mysql = require(‘mysql’);
const db = mysql.createConnection({
host : ‘127.0.0.1’,
user : ‘root’,
password : ‘’,
database : ‘GanttBase’
});
app.use(express.static(path.join(__dirname, “public”)));
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(port, function(){
console.log(“Server is running on port “+port+”…”);
});
app.get(“localhost:5000/data”, function(req, res){
db.query(“SELECT * FROM gantt_tasks”, function(err, rows){
if (err) console.log(err);
db.query(“SELECT * FROM gantt_links”, function(err, links){
if (err) console.log(err);
for (let i = 0; i < rows.length; i++){
rows[i].start_date = rows[i].start_date.format("YYYY-MM-DD");
rows[i].open = true;
}
console.log(rows);
res.send({ data:rows, collections: { links : links } });
});
});
});
index.html
<!DOCTYPE html>
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8”>
</head>
<script src="./codebase/sources/dhtmlxgantt.js" type=“text/javascript” charset=“utf-8”></script>
<link rel=“stylesheet” href="./codebase/dhtmlxgantt.css" type=“text/css” charset=“utf-8”>
<style type=“text/css”>
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
</style>
<body>
<div id=“gantt_here” style=‘width:100%; height:100%;’></div>
<script type=“text/javascript”>
gantt.config.xml_date = “%Y-%m-%d %H:%i:%s”;
//gantt.config.root_id = 0;
gantt.init(“gantt_here”);
gantt.load("/data");
var dp = new gantt.dataProcessor(“localhost:5000/data”);
dp.init(gantt);
dp.setTransactionMode(“REST”);
</script>
</body>