Rearrange JSON object to show in jspdf-autotable - javascript

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);

Related

Fetch JSON data that has multiple pages?

I'm making a fetch to the API to grab the total number of players, the returned data is below:
"data": [
{
"id": 558,
"first_name": "Dave",
"height_feet": null,
"height_inches": null,
"last_name": "Jamerson",
"position": "",
"team": {
"id": 11,
"abbreviation": "HOU",
"city": "Houston",
"conference": "West",
"division": "Southwest",
"full_name": "Houston Rockets",
"name": "Rockets"
},
"weight_pounds": null
},
{
"id": 559,
"first_name": "Scott",
"height_feet": null,
"height_inches": null,
"last_name": "Brooks",
"position": "",
"team": {
"id": 18,
"abbreviation": "MIN",
"city": "Minnesota",
"conference": "West",
"division": "Northwest",
"full_name": "Minnesota Timberwolves",
"name": "Timberwolves"
},
"weight_pounds": null
},
{
"id": 560,
"first_name": "Rolando",
"height_feet": null,
"height_inches": null,
"last_name": "Blackman",
"position": "",
"team": {
"id": 7,
"abbreviation": "DAL",
"city": "Dallas",
"conference": "West",
"division": "Southwest",
"full_name": "Dallas Mavericks",
"name": "Mavericks"
},
"weight_pounds": null
},
{
"id": 561,
"first_name": "Avery",
"height_feet": null,
"height_inches": null,
"last_name": "Johnson",
"position": "",
"team": {
"id": 8,
"abbreviation": "DEN",
"city": "Denver",
"conference": "West",
"division": "Northwest",
"full_name": "Denver Nuggets",
"name": "Nuggets"
},
"weight_pounds": null
},
{
"id": 562,
"first_name": "Rod",
"height_feet": null,
"height_inches": null,
"last_name": "Higgins",
"position": "",
"team": {
"id": 10,
"abbreviation": "GSW",
"city": "Golden State",
"conference": "West",
"division": "Pacific",
"full_name": "Golden State Warriors",
"name": "Warriors"
},
"weight_pounds": null
},
{
"id": 566,
"first_name": "Sam",
"height_feet": null,
"height_inches": null,
"last_name": "Vincent",
"position": "",
"team": {
"id": 22,
"abbreviation": "ORL",
"city": "Orlando",
"conference": "East",
"division": "Southeast",
"full_name": "Orlando Magic",
"name": "Magic"
},
"weight_pounds": null
},
{
"id": 567,
"first_name": "Isiah",
"height_feet": null,
"height_inches": null,
"last_name": "Thomas",
"position": "",
"team": {
"id": 9,
"abbreviation": "DET",
"city": "Detroit",
"conference": "East",
"division": "Central",
"full_name": "Detroit Pistons",
"name": "Pistons"
},
"weight_pounds": null
}
],
"meta": {
"total_pages": 39,
"current_page": 1,
"next_page": 2,
"per_page": 100,
"total_count": 3828
}
Problem is, the API only allows for a max of 100 results. As you can see in the "meta" object at the bottom, there is a total_count of 3828 and 39 pages, how would I access the other pages and get all 3828 results? currently I only get the first page with 100 results when I fetch.
const getPlayers = () => {
fetch(`https://www.balldontlie.io/api/v1/players?per_page=100`)
.then(res => res.json())
.then(data => dispatch(playerActions.getPlayers(data)));
}

Comparing 2 arrays of nested objects while ignoring some properties in Javascript

I'm looking to check an API response for against a set of values but the API response contains some additional info that I'm not interested in checking against
Data to check:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
}
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "45 Headrow",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 287
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.87"
}
}
]
API response:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
So I'm not interested in what values are returned for dbIdentifier, designAndCondition and developmentCompletionDate as they are not in my data to check against but I would like to compare the values for the rest of the properties. In practice these arrays will have more than 2 items
I was initially thinking I would remove the unwanted properties from the objects using the function below
const newArray = responseBody.map(({ dbIdentifierIdentifier, detail: { designAndCondition, developmentCompletionDate }, ...rest }) => rest)
Then ordering by address.uniqueIdentifier, converting to JSON strings and comparing the strings but the function above doesn't work with the nested properties as newArray doesn't contain the detail object at all
newArray:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
IS it possible to do it the above way by passing a destructured nested object a map function?
One way to remove the unwanted properties from the API response would be to first copy the response into a new array (to preserve the original response), then delete the properties:
const apiResponse = [{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
let apiResponseCopy = JSON.parse(JSON.stringify(apiResponse))
var newArray = apiResponseCopy.map(i => {
delete i.dbIdentifier
delete i.detail.designAndCondition
delete i.detail.developmentCompletionDate
return i
})
console.log(newArray)
Then, you should be able to compare the newArray against your data.

filter array of objects with dates

I am trying to fetch the data and store into 2 separate arrays from given below array of objects which meet following two conditions
From the current Array of objects, I want to only get the objects whose month is the current month.
another array for past 7 days
How can I do soo?
can I get any tip to work with dates as I am not soo good with it?
{
"status": "success",
"results": 10,
"orders": [
{
"orderID": 1,
"orderStatus": 1,
"purAmt": 1000,
"orderDate": "2020-06-14T03:23:20.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 1,
"name": "lassi",
"price": 62,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 5
},
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 9
}
]
},
{
"orderID": 2,
"orderStatus": 1,
"purAmt": 1000,
"orderDate": "2020-06-14T03:24:32.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 6,
"name": "chicken chilly",
"price": 65,
"image": "images\\PIwc5RQ7s-conn2.PNG",
"quantity": 1
},
{
"productID": 7,
"name": "buteer flyyy",
"price": 70,
"image": "images\\GvIgYj-lO-conn2.PNG",
"quantity": 2
}
]
},
{
"orderID": 4,
"orderStatus": 1,
"purAmt": 250,
"orderDate": "2020-06-15T09:04:45.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 1,
"name": "lassi",
"price": 62,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
},
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 5,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-05-15T10:33:59.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 6,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T10:41:53.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 7,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T10:44:58.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 8,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T11:00:57.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 9,
"orderStatus": 1,
"purAmt": 250,
"orderDate": "2020-06-15T11:01:50.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
}
]
}
The Date object here will help a lot. To get orders this month you could try something like:
orders.filter(order => {
const orderDate = new Date(order.orderDate);
const today = new Date();
const isThisYear = orderDate.getFullYear() === today.getFullYear()
const isThisMonth = orderDate.getMonth() === today.getMonth();
return isThisYear && isThisMonth;
})
And to get in the last 7 days you could try something like:
orders.filter(order => {
const orderDate = Date.parse(order.orderDate); // in milliseconds
const today = Date.now(); // in milliseconds
const millisecondsInAWeek = 604800000;
return orderDate > today - millisecondsInAWeek;
})

How can I access specific value of JSON object? [duplicate]

This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 6 years ago.
I can't seem to console.log the item name and just that. It's in the position data -> pricing -> tables -> items -> name. I am going for an output that says "Toy Panda".
[
{
"event": "recipient_completed",
"data": {
"id": "msFYActMfJHqNTKH8YSvF1",
"name": "Sample Document",
"status": "document.draft",
"date_created": "2014-10-06T08:42:13.836022Z",
"date_modified": "2016-03-04T02:21:13.963750Z",
"action_date": "2016-09-02T22:26:52.227554",
"action_by": {
"id": "FyXaS4SlT2FY7uLPqKD9f2",
"email": "john#appleseed.com",
"first_name": "John",
"last_name": "Appleseed"
},
"created_by": {
"id": "FyXaS4SlT2FY7uLPqKD9f2",
"email": "john#appleseed.com",
"first_name": "John",
"last_name": "Appleseed",
"avatar": "https://pd-live-media.s3.amazonaws.com/users/FyXaS4SlT2FY7uLPqKD9f2/avatar.jpg"
},
"recipients": [
{
"id": "FyXaS4SlT2FY7uLPqKD9f2",
"email": "john#appleseed.com",
"first_name": "John",
"last_name": "Appleseed",
"role": "signer",
"recipient_type": "Signer",
"has_completed": true
}
],
"sent_by": {
"id": "FyXaS4SlT2FY7uLPqKD9f2",
"email": "john#appleseed.com",
"first_name": "John",
"last_name": "Appleseed",
"avatar": "https://pd-live-media.s3.amazonaws.com/users/FyXaS4SlT2FY7uLPqKD9f2/avatar.jpg"
},
"metadata": {
"salesforce_opp_id": "123456",
"my_favorite_pet": "Panda"
},
"tokens": [
{
"name": "Favorite Animal",
"value": "Panda"
}
],
"fields": [
{
"uuid": "YcLBNUKcx45UFxAK3NjLIH",
"name": "Textfield",
"title": "Favorite Animal",
"value": "Panda",
"assigned_to": {
"id": "FyXaS4SlT2FY7uLPqKD9f2",
"email": "john#appleseed.com",
"first_name": "John",
"last_name": "Appleseed",
"role": "Signer",
"recipient_type": "signer",
"has_completed": true,
"type": "recipient"
}
}
],
"pricing": {
"tables": [
{
"id": 82307036,
"name": "PricingTable1",
"is_included_in_total": true,
"summary": {
"discount": 10,
"tax": 0,
"total": 60,
"subtotal": 60
},
"items": [
{
"id": "4ElJ4FEsG4PHAVNPR5qoo9",
"qty": 1,
"name": "Toy Panda",
"cost": "25",
"price": "53",
"description": "Buy a Panda",
"custom_fields": {
"sampleField": "Sample Field"
},
"custom_columns": {
"sampleColumn": "Sample Column"
},
"discount": 10,
"subtotal": 60
}
],
"total": 60
}
]
},
"tags": [
"test tag",
"sales",
"support"
]
}
}
]
I would really appreciate a tip. Thank you
If you store your JSON object into variable called obj you can access that value ("Toy Panda") with:
obj.data.pricing.tables[0].items[0].name
because tables and items are arrays.
Here is a sample example :
<script>
var data = '{"name": "mkyong","age": 30,"address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]}';
var json = JSON.parse(data);
alert(json["name"]); //mkyong
alert(json.name); //mkyong
</script>
Refer this link :[https://www.mkyong.com/javascript/how-to-access-json-object-in-javascript/][1]
In your case it should be something like :
var data = // your json;
var json = JSON.parse(data);
console.log(json.pricing.tables.items[0].name;

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);

Categories

Resources