CODEWITHSUNDEEP
javascriptjqueryarraysjsonorgchart
user2232552
user2232552

Reputation: 152

JQUERY JSON data for Google Orgchart --- parsing nested nodes properly

I am trying to get an array created with v and f nodes like in the image.

The raw data looks like this but for some reason I can get it split properly with jquery code.

[{v:'12345678', f:'Employee 1'},'','Test']

It works when I define it manually:

var newarray = []; newarray= [ [{v:'12345678', f:'Employee 1'},'','Test'] ];

However I can't get this string converted to an array to have google org chart properly interpret it.

"{'v':'12345678','f':'Employee 1'},,Test"

not sure if there is a way to remove double quotes maybe or I am missing a step. Any help would be appreciated.

=

desired result

Upvotes: 0

Views: 66

Answers (1)

user2232552
user2232552

Reputation: 152

I finally figured out the portion for having the json data interpreted properly. Some of it required making the sure the quotes were all in the correct place in the source data coming from SharePoint.

Then it was simply using JSON.Parse feature (see just before the addRow step)

function OnSuccess(data) {
var org_data = data.value;

//only keep data field from SP list 
var listToKeep = ['data'];

org_data.forEach((obj)=>{
  Object.keys(obj).forEach((key)=>{
     if(listToKeep.indexOf(key) === -1){
       delete obj[key];
     }
  });
});

console.log(org_data);

//Google chart
google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');   

//add rows of hierearchy from JSON data---spliting the data into the 3 necessary columns

//loop through all org data records to create table
for ( var i = 0, l = org_data.length; i < l; i++ ) {

//Parse JSON format
var row = JSON.parse(org_data[i].data);

    data.addRow(row);
}

Upvotes: 0

Related Questions