Data does not print on client


#1

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>


#2

Hello Marcus,
I see that your server.js file doesn’t have the necessary functions mentioned in the “Requests and responses” part of the “Step 5” section:
https://docs.dhtmlx.com/gantt/desktop__howtostart_nodejs.html#step5savingchanges
You need to add them to load and save changes.
Here is the demo from the tutorial:
https://files.dhtmlx.com/30d/9081fe45584dbf6569628d3ae3387f23/nodejs_tutorial_demo.zip