Develop Reference

Convert row-data to sunburst chart data for Highcharts library

My Row-Data which I got from my MongoDB database. Now, I want to convert the below data to sunburst chart data. Can anyone help me?
These are my Input data array.
[
{
"globalId": "Chart Global",
"country": "India",
"state": "Gujarat",
"city": "Vadodara",
"mode": "traffic",
"value": 2.9
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Rajsthan",
"city": "Jaipur",
"mode": "traffic",
"value": 2.9
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "traffic",
"value": 100
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "population",
"value": 2000
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "animals",
"value": 5
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "birds",
"value": 0
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "trees",
"value": 0
}
]
I want data for the sunburst Chart for highcharts library
Does anyone have solutions?

As a start point you can use this function (I changed a little bit the data to see more effects):
function seqToBurstData(originalData, circleKeys){
const sunBurstData = [];
const valuePath2pointId = {}; // auxiliary data used to identify the parent id of a point
// get all the values for {dataPoint} from top key to {level} key, joined by '_'
// used to index nameLevel2pointId data, to ensure each point has a unique index value
const valuePath = (dataPoint, level) =>
Array.from({length: level}, (_, i) => dataPoint[circleKeys[i]]).join('_');
circleKeys.forEach(function(key, index){
const level = index + 1;
let currentValuePath = null, nValues = 0, sunBurstPoint;
for(const o of originalData){
const thisValuePath = valuePath(o, level);
if(thisValuePath !== currentValuePath){
currentValuePath = thisValuePath;
sunBurstPoint = {
id: level + '.' + nValues, // scheme similar to Highcharts examples for sunburst
parent: level === 1 ? null : valuePath2pointId[valuePath(o, level - 1)],
name: o[key],
level, // level not required but useful
...(level === circleKeys.length ? {value: o.value} : {}) // only for the final level
};
if(level < circleKeys.length){
valuePath2pointId[currentValuePath] = sunBurstPoint.id;
}
sunBurstData.push(sunBurstPoint);
nValues++;
}
else if(level === circleKeys.length){
sunBurstPoint.value += o.value;
}
}
});
return sunBurstData;
}
const originalData = [
{
"globalId": "Chart Global",
"first": "India",
"state": "Gujarat",
"city": "Vadodara",
"mode": "traffic",
"value": 59
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Rajasthan",
"city": "Jaipur",
"mode": "traffic",
"value": 59
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Rajasthan",
"city": "Ranthambore",
"mode": "tigers",
"value": 40
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "traffic",
"value": 100
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "population",
"value": 200
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "animals",
"value": 50
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "birds",
"value": 5
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "trees",
"value": 5
}
];
const sunBurstData = seqToBurstData(originalData, ['first', 'state', 'city', 'mode']).
// add the "intro" key to change the point title according to the level
map(o=>({...o, intro: o.level === 4 ? 'The value of' : 'Total for'}));
Highcharts.chart('chart', {
chart: {
height: '100%'
},
title: {
text: ''
},
series: [{
type: 'sunburst',
data: sunBurstData,
name: sunBurstData[0].name,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}'
},
levels: [{
level: 1,
color: 'transparent'
}, {
level: 2,
colorByPoint: true
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: 0.3
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: -0.3
}
}]
}],
tooltip: {
headerFormat: '',
pointFormat: '{point.intro} <b>{point.name}</b> is <b>{point.value}</b>'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="chart"></div>

Rearrange JSON object to show in jspdf-autotable

I have following object, which I need to rearrange. Please help me to convert it from following format.
I am receiving th Json array from web service. I need to show in japdf-autotable.
I have able to format the table and guese the following data structure should work.
If someone have better ideas also can suggest me.
[
{
"location": "OFFICE",
"designation": "SWEETS",
"name": "BHOROT DOLUI",
"salary": 9500
},
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "SOUMEN PAL",
"salary": 10000
},
{
"location": "OFFICE",
"designation": "STAFF",
"name": "NANDU YADAV",
"salary": 11000
},
{
"location": "OUTLETS",
"designation": "DRIVER",
"name": "PANKAJ YADAV",
"salary": 10200
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AJIT YADAV",
"salary": 9100
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AVIJIT BHOWMICK",
"salary": 9500
},
{
"location": "OUTLETS",
"designation": "SWEETS",
"name": "ARUN DAS",
"salary": 10200
},
{
"location": "FACTORY",
"designation": "STAFF",
"name": "RAJESH KUMAR YADAV",
"salary": 18000
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AMIT RAM",
"salary": 9000
},
{
"location": "OUTLETS",
"designation": "SALES BOY",
"name": "RAKESH HAZRA",
"salary": 9500
},
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "MD AKHTER",
"salary": 9000
}
]
I need to the following format.
[
{
"location": "OFFICE",
"designation": "SWEETS",
data: [
{
"location": "OFFICE",
"designation": "SWEETS",
"name": "BHOROT DOLUI",
"salary": 9500
}
],
},
{
"location": "OFFICE",
"designation": "DRIVER",
"data": [
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AJIT YADAV",
"salary": 9100
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AVIJIT BHOWMICK",
"salary": 9500
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AMIT RAM",
"salary": 9000
},
]
},
{
"location": "OFFICE",
"designation": "STAFF",
"data": [
{
"location": "OFFICE",
"designation": "STAFF",
"name": "NANDU YADAV",
"salary": 11000
},
]
},
{
"location": "FACTORY",
"designation": "DRIVER",
"data": [
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "SOUMEN PAL",
"salary": 10000
},
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "MD AKHTER",
"salary": 9000
}
]
},
{
"location": "FACTORY",
"designation": "STAFF",
"data": [
{
"location": "FACTORY",
"designation": "STAFF",
"name": "RAJESH KUMAR YADAV",
"salary": 18000
}
]
},
{
"location": "OUTLETS",
"designation": "DRIVER",
"data": [
{
"location": "OUTLETS",
"designation": "DRIVER",
"name": "PANKAJ YADAV",
"salary": 10200
},
]
},
{
"location": "OUTLETS",
"designation": "SWEETS",
"data": [
{
"location": "OUTLETS",
"designation": "SWEETS",
"name": "ARUN DAS",
"salary": 10200
}
]
},
{
"location": "OUTLETS",
"designation": "SALES BOY",
"data": [
{
"location": "OUTLETS",
"designation": "SALES BOY",
"name": "RAKESH HAZRA",
"salary": 9500
}
]
}
]

You can easily achieve this using reduce and find
const arr = [
{
location: "OFFICE",
designation: "SWEETS",
name: "BHOROT DOLUI",
salary: 9500,
},
{
location: "FACTORY",
designation: "DRIVER",
name: "SOUMEN PAL",
salary: 10000,
},
{
location: "OFFICE",
designation: "STAFF",
name: "NANDU YADAV",
salary: 11000,
},
{
location: "OUTLETS",
designation: "DRIVER",
name: "PANKAJ YADAV",
salary: 10200,
},
{
location: "OFFICE",
designation: "DRIVER",
name: "AJIT YADAV",
salary: 9100,
},
{
location: "OFFICE",
designation: "DRIVER",
name: "AVIJIT BHOWMICK",
salary: 9500,
},
{
location: "OUTLETS",
designation: "SWEETS",
name: "ARUN DAS",
salary: 10200,
},
{
location: "FACTORY",
designation: "STAFF",
name: "RAJESH KUMAR YADAV",
salary: 18000,
},
{
location: "OFFICE",
designation: "DRIVER",
name: "AMIT RAM",
salary: 9000,
},
{
location: "OUTLETS",
designation: "SALES BOY",
name: "RAKESH HAZRA",
salary: 9500,
},
{
location: "FACTORY",
designation: "DRIVER",
name: "MD AKHTER",
salary: 9000,
},
];
const result = arr.reduce((acc, curr) => {
const { location, designation, name, salary } = curr;
const findEl = acc.find((o) => o.designation === designation && o.location === location);
if (findEl) {
findEl.data.push(curr);
} else {
acc.push({ location, designation, data: [{ ...curr }] });
}
return acc;
}, []);
console.log(result);

how to get data from a json file in real time

I try to make this for a long time and i wrote some test script .I use setInterval to update the content once at 500s but i can't acces the inputs for exemple if i have a form there i don't know how i can write in input without the write been deleted.I use setInterval because i want to see every input from the database .
The index script
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}<input type="text" />
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
setInterval(function(){$http.get("customers.json").then(function (response) {
$scope.myData = response.data.records;
});},500);
});
</script>
</body>
</html>
And the json file
{
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}
]
}

If you want do real-time application, nodejs + socket.io (websocket) will best fit your needs. Here is an example of how to use socket.io(websocket lib):
https://socket.io/get-started/chat/
In addition, any ajax calls will takes time, can easily take more then one second. Therefore, real-time web application need to use websocket instead of transitional ajax call.

Unique counter in ng-repeat

I have this table with 15 row.
Plunkr
Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="item in myObj">
<td>{{$index +1}}</td>
<td>{{item.Name}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = [ {
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}]
});
</script>
</body>
</html>
and here's the output:
Let's say I delete an object in the array, total row will be 14 and when I add an object into array, it will return to 15. That was expected.
Now what I want to do is, WITHOUT using controller and everything is done in the VIEW; after I remove an object and add it back, I want the row will shown as 16 and not 15. I mean $index should be increasing and not decreasing.
I have done it with controller but is it possible to do it with only in the view?
Thanks for your time and any help in advance.

You could "soft-delete" the row. Instead of actually removing it from the array, you can simply mark it as deleted. Then the count will continue to increase as you add items:
function softDelete(item) {
item.deleted = true;
}
I don't know why you wouldn't want to use the controller, but this could also be done in the view:
<tr ng-repeat="item in myObj" ng-click="item.deleted = true" ng-hide="item.deleted">
<td>{{$index +1}}</td>
<td>{{item.Name}}</td>
</tr>
Here is a plunker demonstrating:
https://plnkr.co/edit/yuAIXn5Pe9YbwxXW2qih?p=preview

Nested JSON iterate, Maximum call stack size exceeded

I have implemented a recursive function to iterate through a nested JSON. The issue I am facing is that it throws the error
Maximum call stack exceeded
The function that I implemented is as follows,
function createTreeMap (treeCatalog){
var _this = this;
_.each(treeCatalog, function (ele, inx){
if(typeof (ele) === "object"){
createTreeMap(ele);
}else{
//I create another JSON structure with the value as its property and its value as 1.
_this.treeMap[ele] = 1;
}
});
}
and the JSON I am iterating through looks something like this,
[{
"EmployeeID": 2,
"FirstName": "Andrew",
"LastName": "Fuller",
"Country": "USA",
"Title": "Vice President, Sales",
"HireDate": "1992-08-14 00:00:00",
"BirthDate": "1952-02-19 00:00:00",
"City": "Tacoma",
"Address": "908 W. Capital Way",
children: [{
"EmployeeID": 8,
"FirstName": "Laura",
"LastName": "Callahan",
"Country": "USA",
"Title": "Inside Sales Coordinator",
"HireDate": "1994-03-05 00:00:00",
"BirthDate": "1958-01-09 00:00:00",
"City": "Seattle",
"Address": "4726 - 11th Ave. N.E."
}, {
"EmployeeID": 1,
"FirstName": "Nancy",
"LastName": "Davolio",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-05-01 00:00:00",
"BirthDate": "1948-12-08 00:00:00",
"City": "Seattle",
"Address": "507 - 20th Ave. E.Apt. 2A"
}, {
"EmployeeID": 3,
"FirstName": "Janet",
"LastName": "Leverling",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-04-01 00:00:00",
"BirthDate": "1963-08-30 00:00:00",
"City": "Kirkland",
"Address": "722 Moss Bay Blvd."
}, {
"EmployeeID": 4,
"FirstName": "Margaret",
"LastName": "Peacock",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1993-05-03 00:00:00",
"BirthDate": "1937-09-19 00:00:00",
"City": "Redmond",
"Address": "4110 Old Redmond Rd."
}, {
"EmployeeID": 5,
"FirstName": "Steven",
"LastName": "Buchanan",
"Country": "UK",
"Title": "Sales Manager",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1955-03-04 00:00:00",
"City": "London",
"Address": "14 Garrett Hill",
"expanded": "true",
children: [{
"EmployeeID": 6,
"FirstName": "Michael",
"LastName": "Suyama",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1963-07-02 00:00:00",
"City": "London",
"Address": "Coventry House Miner Rd."
}, {
"EmployeeID": 7,
"FirstName": "Robert",
"LastName": "King",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-01-02 00:00:00",
"BirthDate": "1960-05-29 00:00:00",
"City": "London",
"Address": "Edgeham Hollow Winchester Way"
},{
"EmployeeID": 9,
"FirstName": "Anne",
"LastName": "Dodsworth",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-11-15 00:00:00",
"BirthDate": "1966-01-27 00:00:00",
"City": "London",
"Address": "7 Houndstooth Rd."
}]
}]
}];
My suspicion is the similar child property names. But is there a proper way of fixing this as the similar child names is a requirement.
Thank you very much :)
UPDATE
this example simulates the issue I am having : http://jsfiddle.net/qaoapays/1/

After binding your source to jqxTreeGrid it a small change it structure: add parent property, and data property, where data - reference to self.
As workaround, to avoid infinite recursion you need miss this property, something like
function iterate (obj){
_.each(obj, function(ele, inx){
if(typeof (ele) === "object" && ele !== obj && inx !== 'parent'){
iterate(ele);
}else{
console.log(ele);
}
});
}
var employees =
[{
"EmployeeID": 2,
"FirstName": "Andrew",
"LastName": "Fuller",
"Country": "USA",
"Title": "Vice President, Sales",
"HireDate": "1992-08-14 00:00:00",
"BirthDate": "1952-02-19 00:00:00",
"City": "Tacoma",
"Address": "908 W. Capital Way",
children: [{
"EmployeeID": 8,
"FirstName": "Laura",
"LastName": "Callahan",
"Country": "USA",
"Title": "Inside Sales Coordinator",
"HireDate": "1994-03-05 00:00:00",
"BirthDate": "1958-01-09 00:00:00",
"City": "Seattle",
"Address": "4726 - 11th Ave. N.E."
}, {
"EmployeeID": 1,
"FirstName": "Nancy",
"LastName": "Davolio",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-05-01 00:00:00",
"BirthDate": "1948-12-08 00:00:00",
"City": "Seattle",
"Address": "507 - 20th Ave. E.Apt. 2A"
}, {
"EmployeeID": 3,
"FirstName": "Janet",
"LastName": "Leverling",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-04-01 00:00:00",
"BirthDate": "1963-08-30 00:00:00",
"City": "Kirkland",
"Address": "722 Moss Bay Blvd."
}, {
"EmployeeID": 4,
"FirstName": "Margaret",
"LastName": "Peacock",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1993-05-03 00:00:00",
"BirthDate": "1937-09-19 00:00:00",
"City": "Redmond",
"Address": "4110 Old Redmond Rd."
}, {
"EmployeeID": 5,
"FirstName": "Steven",
"LastName": "Buchanan",
"Country": "UK",
"Title": "Sales Manager",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1955-03-04 00:00:00",
"City": "London",
"Address": "14 Garrett Hill",
"expanded": "true",
children: [{
"EmployeeID": 6,
"FirstName": "Michael",
"LastName": "Suyama",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1963-07-02 00:00:00",
"City": "London",
"Address": "Coventry House Miner Rd."
}, {
"EmployeeID": 7,
"FirstName": "Robert",
"LastName": "King",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-01-02 00:00:00",
"BirthDate": "1960-05-29 00:00:00",
"City": "London",
"Address": "Edgeham Hollow Winchester Way"
}, {
"EmployeeID": 9,
"FirstName": "Anne",
"LastName": "Dodsworth",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-11-15 00:00:00",
"BirthDate": "1966-01-27 00:00:00",
"City": "London",
"Address": "7 Houndstooth Rd."
}]
}]
}];
//// prepare the data
var source = {
dataType: "json",
dataFields: [{
name: 'EmployeeID',
type: 'number'
}, {
name: 'FirstName',
type: 'string'
}, {
name: 'LastName',
type: 'string'
}, {
name: 'Country',
type: 'string'
}, {
name: 'City',
type: 'string'
}, {
name: 'Address',
type: 'string'
}, {
name: 'Title',
type: 'string'
}, {
name: 'HireDate',
type: 'date'
}, {
name: 'children',
type: 'array'
}, {
name: 'expanded',
type: 'bool'
}, {
name: 'BirthDate',
type: 'date'
}],
hierarchy: {
root: 'children'
},
id: 'EmployeeID',
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid({
width: 680,
source: dataAdapter,
editable: true,
filterable: true,
theme: 'energyblue',
columns: [{
text: 'FirstName',
dataField: 'FirstName',
width: 150
}, {
text: 'LastName',
dataField: 'LastName',
width: 120
}, {
text: 'Title',
dataField: 'Title',
width: 200
}, {
text: 'Birth Date',
dataField: 'BirthDate',
cellsFormat: 'd',
width: 120
}, {
text: 'Hire Date',
dataField: 'HireDate',
cellsFormat: 'd',
width: 120
}, {
text: 'Address',
dataField: 'Address',
width: 250
}, {
text: 'City',
dataField: 'City',
width: 120
}, {
text: 'Country',
dataField: 'Country',
width: 120
}]
});
$("#jqxbutton").jqxButton({
theme: 'energyblue',
height: 30
});
$('#jqxbutton').click(function () {
$("#treeGrid").jqxTreeGrid('expandRow',2);
iterate(employees);
});
function iterate (obj){
_.each(obj, function(ele, inx){
if(typeof (ele) === "object" && ele !== obj && inx !== 'parent'){
iterate(ele);
}else{
console.log(ele);
}
});
}
<script src="http://documentcloud.github.io/underscore/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Expand a row" />
Yet another way: pass to source - deep cloned object

Hasitha, I think you are putting the object you are cataloging ("ele") back into the function itself.
instead of
createTreeMap(ele);
try something like this
createTreeMap(ele.child);