Question

I am trying to dynamicaly generate data in json for jQuery gantt chart. I know PHP but am totally green with JavaScript. I have read dozen of solutions on how dynamicaly add data to json, and tried few dozens of combinations and nothing. Here is the json format:

var data = [{
    name: "Sprint 0",
    desc: "Analysis",
    values: [{
        from: "/Date(1320192000000)/",
        to: "/Date(1322401600000)/",
        label: "Requirement Gathering", 
        customClass: "ganttRed"
        }]
    },{
    name: " ",
    desc: "Scoping",
    values: [{
        from: "/Date(1322611200000)/",
        to: "/Date(1323302400000)/",
        label: "Scoping", 
        customClass: "ganttRed"
        }]
    }, <!-- Somoe more data-->

      }];

now I have all data in php db result. Here it goes:

$rows=$db->fetchAllRows($result);
$rowsNum=count($rows);

And this is how I wanted to create json out of it:

var data='';
<?php foreach ($rows as $row){ ?>
data['name']="<?php echo $row['name'];?>";
data['desc']="<?php echo $row['desc'];?>";
data['values'] = {"from" : "/Date(<?php echo $row['from'];?>)/", "to" : "/Date(<?php echo $row['to'];?>)/", "label" : "<?php echo $row['label'];?>", "customClass" : "ganttOrange"};
}

However this does not work. I have tried without loop and replacing php variables with plain text just to check, but it did not work either. Displays chart without added items. If I add new item by adding it to the list of values, it works. So there is no problem with the Gantt itself or paths. Based on all above I assume the problem is with adding plain data to json. Can anyone please help me to fix it?

Answer 1

First of all you’re adding properties to string instead of building object. If you really want to do that this way:

 var data = [], row;
 <?php foreach ($rows as $row) : ?>
     row = {};
     row.name ="<?php echo $row['name'];?>";
     row.desc ="<?php echo $row['desc'];?>";
     row.values = {"from" : "/Date(<?php echo $row['from'];?>)/", "to" : "/Date(<?php echo $row['to'];?>)/", "label" : "<?php echo $row['label'];?>", "customClass" : "ganttOrange"};
     data.push(row);
 <?php endforeach; ?>

Anyway it is unsafe (and result is normal JS code, not proper JSON object – but as you’re assigning it to variable then I suppose it does not have to be in strict JSON format)

Better approach would be to build data structure in PHP and use json_encode function to generate JSON data for JavaScript:

 <?php
 $data = array();
 foreach ($rows as $row) {
      $data[] = array(
          'name'   => $row['name'],
          'desc'   => $row['desc'],
          'values' => array(array(
              'from'        => '/Date('.$row['from'].'>)/', 
              'to'          => '/Date('.$row['to'].')/',
              'label'       => $row['label'], 
              'customClass' => 'ganttOrange',
          ))
      );
 }
 ?>
 var data = <?php echo json_encode($data); ?>;