Related
I have the following JSON array I want to create a new field in every object which will be a count of the object
we have to get a count based on status, shop, and name(ownerDetails)
How can I achieve this and I have added my expected output below
var items = [
{
"id": 1,
"status": "ORANGE",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 2,
"status": "GREEN",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 3,
"status": "ORANGE",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 4,
"status": "YELLOW",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 5,
"status": "RED",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id":6,
"status": "GREEN",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 7,
"status": "GREEN",
"Shop":"XYZ",
"ownerDetails":[ {"name":"test2","address":"test2"}]
},
{
"id": 8,
"status": "ORANGE",
"Shop":"XYZ",
"ownerDetails":[ {"name":"test2","address":"test2"}]
},
{
"id": 9,
"status": "YELLOW",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 10,
"status": "GREEN",
"Shop":"EFG",
"ownerDetails":[ {"name":"test3","address":"test3"}]
},
{
"id": 11,
"status": "GREEN",
"Shop":"EFG",
"ownerDetails":[ ]
}
]
Expected output: So based on each shop, status and name(ownerDetails) we have to count the object
[
{
"id": 1,
"status": "ORANGE"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 2
},
{
"id": 2,
"status": "GREEN"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 2
},
{
"id": 3,
"status": "ORANGE"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 2
},
{
"id": 4,
"status": "YELLOW"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 2
},
{
"id": 5,
"status": "RED"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 1
},
{
"id":6,
"status": "GREEN"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 2
},
{
"id": 7,
"status": "GREEN"
"Shop":"XYZ",
"ownerDetails":[ {"name":"test2","address":"test2"}],
"Count": 1
},
{
"id": 8,
"status": "ORANGE"
"Shop":"XYZ",
"ownerDetails":[ {"name":"test2","address":"test2"}],
"Count": 1
},
{
"id": 9,
"status": "YELLOW"
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}],
"Count": 2
},
{
"id": 10,
"status": "GREEN"
"Shop":"EFG"
"ownerDetails":[ {"name":"test3","address":"test3"}],
"Count": 1
},
{
"id": 11,
"status": "GREEN",
"Shop":"EFG",
"ownerDetails":[ ],
"Count": 1
}
]
Plese see demo
Thanks #Nico_ for your and #Parth Ravalhelp
Below code is not working when "ownerDetails":[ ] and I got the below error Cannot read properties of undefined (reading 'name') in console
code :
const itemsWithCount = items.map(item => ({
...item,
Count: items.filter(({ status, Shop ,ownerDetails: [{ name }]}) => item.status === status && item.Shop === Shop && item.ownerDetails[0].name === name).length
}));
console.log(itemsWithCount)
Deconstruction of a not defined object
/**
* Problem: The deconstructed object is not defined.
*
* This will throw: TypeError: Cannot read properties of undefined (reading 'name')
*
* This is roughly equivalent of doing const { name } = undefined
*/
const [{ name }] = [];
/**
* Solution: Assign a default value when the deconstructed object is not defined.
*
* If the deconstructing object is undefined,
* assign an empty object as the default value
*/
const [{ name } = {}] = [];
Accessing a property of an undefined object
If you don't check that the ownerDetails array isn't empty before comparing item.ownerDetails[0].name === name, you might end up trying to access a property of an object that doesn't exist. This will result in a TypeError like above.
To deal with this situation, you must:
Verify that there is at least one element in item.ownerDetails;
Verify that name property exists on the first element;
If the tests passed, returns the value of the name property for the first element of ownerDetails. Otherwise, you must provide a default value.
Working example
const items = [
{ id: 1, status: 'ORANGE', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 2, status: 'GREEN', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 3, status: 'ORANGE', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 4, status: 'YELLOW', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 5, status: 'RED', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 6, status: 'GREEN', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 7, status: 'GREEN', Shop: 'XYZ', ownerDetails: [{ name: 'test2', address: 'test2' }] },
{ id: 8, status: 'ORANGE', Shop: 'XYZ', ownerDetails: [{ name: 'test2', address: 'test2' }] },
{ id: 9, status: 'YELLOW', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
{ id: 10, status: 'GREEN', Shop: 'EFG', ownerDetails: [{ name: 'test3', address: 'test3' }] },
{ id: 11, status: 'GREEN', Shop: 'EFG', ownerDetails: [] }
];
const itemsWithCount = items.map(item => ({
...item,
/**
* If the first element of ownerDetails is not defined,
* assign an empty object as the default value for the first
* element of ownerDetails array.
*/
Count: items.filter(({ status, Shop, ownerDetails: [{ name } = {}] }) =>
item.status === status &&
item.Shop === Shop &&
(
(
/**
* 1. Check if ownerDetails is not empty.
*/
item.ownerDetails.length &&
/**
* 2. Check if the first element of item.ownerDetails has a name property.
*
* ESLint best practice:
* ------------------------------------------------------
* Disallow calling some Object.prototype methods directly on objects.
* For more details, see https://eslint.org/docs/rules/no-prototype-builtins
* ------------------------------------------------------
*/
Object.prototype.hasOwnProperty.call(item.ownerDetails[0], 'name') &&
/**
* 3. Accessing and returning name property.
*/
item.ownerDetails[0].name
/**
* Else, compare undefined with name property.
*/
) || undefined
) === name
).length
}));
console.log(itemsWithCount)
Output
[
{ Count: 2, id: 1, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'ORANGE' },
{ Count: 2, id: 2, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'GREEN' },
{ Count: 2, id: 3, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'ORANGE' },
{ Count: 2, id: 4, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'YELLOW' },
{ Count: 1, id: 5, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'RED' },
{ Count: 2, id: 6, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'GREEN' },
{ Count: 1, id: 7, ownerDetails: [{ address: 'test2', name: 'test2' }], Shop: 'XYZ', status: 'GREEN' },
{ Count: 1, id: 8, ownerDetails: [{ address: 'test2', name: 'test2' }], Shop: 'XYZ', status: 'ORANGE' },
{ Count: 2, id: 9, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'YELLOW' },
{ Count: 1, id: 10, ownerDetails: [{ address: 'test3', name: 'test3' }], Shop: 'EFG', status: 'GREEN' },
{ Count: 1, id: 11, ownerDetails: [], Shop: 'EFG', status: 'GREEN' }
]
var items = [{
"id": 1,
"status": "ORANGE",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 2,
"status": "GREEN",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 3,
"status": "ORANGE",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 4,
"status": "YELLOW",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 5,
"status": "RED",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 6,
"status": "GREEN",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 7,
"status": "GREEN",
"Shop": "XYZ",
"ownerDetails": [{
"name": "test2",
"address": "test2"
}]
},
{
"id": 8,
"status": "ORANGE",
"Shop": "XYZ",
"ownerDetails": [{
"name": "test2",
"address": "test2"
}]
},
{
"id": 9,
"status": "YELLOW",
"Shop": "ABC",
"ownerDetails": [{
"name": "test1",
"address": "test1"
}]
},
{
"id": 10,
"status": "GREEN",
"Shop": "EFG",
"ownerDetails": [{
"name": "test3",
"address": "test3"
}]
}
];
var mapData = items.map((data) => {
var getList = items.filter(word => word.Shop == data.Shop).length;
return {
id: data.id,
status: data.status,
Shop: data.Shop,
text: data.ownerDetails,
Count: getList
};
});
console.log(mapData);
Note:- Map Data and Counted Similar Shops....
Looping through the array for each element is not an efficient way to go about it. A cleaner and more efficient way would be to create an object with keys as the combination of the values you need to compare.
Following should help:
let items = [
{"id":1,"status":"ORANGE","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":2,"status":"GREEN","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":3,"status":"ORANGE","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":4,"status":"YELLOW","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":5,"status":"RED","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":6,"status":"GREEN","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":7,"status":"GREEN","Shop":"XYZ","ownerDetails":[{"name":"test2","address":"test2"}]},
{"id":8,"status":"ORANGE","Shop":"XYZ","ownerDetails":[{"name":"test2","address":"test2"}]},
{"id":9,"status":"YELLOW","Shop":"ABC","ownerDetails":[{"name":"test1","address":"test1"}]},
{"id":10,"status":"GREEN","Shop":"EFG","ownerDetails":[{"name":"test3","address":"test3"}]},
{"id":11,"status":"GREEN","Shop":"EFG","ownerDetails":[]}
]
let itemMap = {};
for (const item of items) {
const key = `${item.Shop}_${item.status}_${item.ownerDetails[0]?.name}`;
if (itemMap[key]) {
itemMap[key].push({ ...item, Count: itemMap[key][0].Count+1 });
for (const matchedItem of itemMap[key]) {
matchedItem.Count++;
}
} else {
itemMap[key] = [{ ...item, Count: 1 }];
}
}
let processedItems = [];
for (const items of Object.values(itemMap)) {
for (const item of items) {
processedItems.push(item);
}
}
console.log(processedItems);
Note: This would not work if the order of the objects is to be preserved
You can do it with a map to loop through your array (you need to add some coma before the "Shop" by the way.
const items = [
{
"id": 1,
"status": "ORANGE",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 2,
"status": "GREEN",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 3,
"status": "ORANGE",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 4,
"status": "YELLOW",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 5,
"status": "RED",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id":6,
"status": "GREEN",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 7,
"status": "GREEN",
"Shop":"XYZ",
"ownerDetails":[ {"name":"test2","address":"test2"}]
},
{
"id": 8,
"status": "ORANGE",
"Shop":"XYZ",
"ownerDetails":[ {"name":"test2","address":"test2"}]
},
{
"id": 9,
"status": "YELLOW",
"Shop":"ABC",
"ownerDetails":[ {"name":"test1","address":"test1"}]
},
{
"id": 10,
"status": "GREEN",
"Shop":"EFG",
"ownerDetails":[ {"name":"test3","address":"test3"}]
},
{
"id": 11,
"status": "GREEN",
"Shop":"EFG",
"ownerDetails":[ ]
}
];
const itemsWithCount = items.map(item => ({
...item,
Count: items.filter(({ status, Shop }) => item.status === status && item.Shop === Shop).length
}));
For each item of your array, you keep the current value of the item (the ...item) and you add a Count property, that will get the count for this item by filtering the array to keep only the item that have the same status and shop and you get the length of that array.
I'm working on a project in React and I'm having trouble mapping the JSON object that gets from the API. I want to get a table like this:
Image
and the JSON object looks like this:
{
"userName": "user1",
"memberCommunity": [
{
"userName": "user5",
"community": [
{
"level": 1,
"members": 3
},
{
"level": 2,
"members": 3
},
{
"level": 3,
"members": 1
}
]
},
{
"userName": "user18",
"community": []
},
{
"userName": "user2",
"community": [
{
"level": 1,
"members": 3
},
{
"level": 2,
"members": 4
},
{
"level": 3,
"members": 3
},
{
"level": 4,
"members": 6
},
{
"level": 5,
"members": 2
},
{
"level": 6,
"members": 1
}
]
}
]
}
The table image was created exactly on the data that I gave. The problem here is the proper use of the Map function, thanks to which I will get records with three users and for each of them the appropriate value in the level field. I hope I won't mix it up and you know what's going on :) Please help.
You can accomplish this with 2 reduce functions to iterate over the nested arrays.
const data = {
userName: "user1",
memberCommunity: [
{
userName: "user5",
community: [
{
level: 1,
members: 3
},
{
level: 2,
members: 3
},
{
level: 3,
members: 1
}
]
},
{
userName: "user18",
community: []
},
{
userName: "user2",
community: [
{
level: 1,
members: 3
},
{
level: 2,
members: 4
},
{
level: 3,
members: 3
},
{
level: 4,
members: 6
},
{
level: 5,
members: 2
},
{
level: 6,
members: 1
}
]
}
]
};
const format = data.memberCommunity.reduce((acc, curr) => {
return {
...acc,
[curr.userName]: curr.community.reduce((acc2, curr2) => {
return {
...acc2,
[`level ${curr2.level}`]: curr2.members
}
}, {}),
};
}, {});
console.log(format);
I have a treeview using angular-tree-component as use of following link Refernece
Where the array is in below format:
nodes = [
{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [
{ id: 7, name: 'granchild 2.2.1' }
]
}
]
}
];
But I have a json nested array in the below format:
[
{
"name": "root1",
"subCategory": [
{
"name": "child1",
"childCategory": []
},
{
"name": "child2",
"childCategory": []
}
]
},
{
"name": "level2",
"subCategory": [
{
"name": "level2.1",
"childCategory": []
},
{
"name": "level2.2",
"childCategory": [
{
"name": "granchild 2.2.1",
"type": "checkbox"
}
]
}
]
}
]
My doubts are below:
How can I convert json to required array Format which is acceptable by the angular-tree-component
As you can see the type is checkbox {"name": "granchild 2.2.1","type": "checkbox"}. So the grandchild 2.2.1 should be a check box and if it was radio button it should be radio.
Please guide me...
You can transform json to your array using this code (id=1 at start)
a.map(x=> (
x.id=id,
id++,
x.subCategory.map(y=> (
y.id=id,
id++,
(y.childCategory.length ? y.children=y.childCategory : 0),
y.childCategory.map(z=> (z.id=id, id++)),
delete y.childCategory
)),
(x.subCategory.length ? x.children=x.subCategory : 0),
delete x.subCategory
));
let a=[
{
"name": "root1",
"subCategory": [
{
"name": "child1",
"childCategory": []
},
{
"name": "child2",
"childCategory": []
}
]
},
{
"name": "level2",
"subCategory": [
{
"name": "level2.1",
"childCategory": []
},
{
"name": "level2.2",
"childCategory": [
{
"name": "granchild 2.2.1",
"type": "checkbox"
}
]
}
]
}
]
let id=1;
a.map(x=> (
x.id=id,
id++,
x.subCategory.map(y=> (
y.id=id,
id++,
(y.childCategory.length ? y.children=y.childCategory : 0),
y.childCategory.map(z=> (z.id=id, id++)),
delete y.childCategory
)),
(x.subCategory.length ? x.children=x.subCategory : 0),
delete x.subCategory
));
console.log(a);
in the backend php server, i've a class Part like this :
Class Part(){
$id; // Integer
$name; //string
$parents; // Array, which is a list of all of parents Part
}
So the attribute $parents, it's essentially a list of type Part, cause a Part can have a parent Part.
Example, you need Part id=1 & Part id=2, to build Part id=3.
You need Part id=3, Part id=4, Part id=5 to build Part id=6, and so on...
I get this json data from the server.
[{
"id": 1,
"name": "foo",
"list_parents": [{
"id": 3,
"name": "foobar",
"list_parents": [{
"id": 6,
"name": "ttt",
"list_parents": [{
"id": 7,
"name": "xxx",
"list_parents": []
}, {
"id": 8,
"name": "yyy",
"list_parents": []
}, {
"id": 9,
"name": "zzz",
"list_parents": []
}]
}]
}]
}, {
"id": 2,
"name": "bar",
"list_parents": [{
"id": 3,
"name": "foobar",
"list_parents": [{
"id": 6,
"name": "ttt",
"list_parents": [{
"id": 7,
"name": "xxx",
"list_parents": []
},
{
"id": 8,
"name": "yyy",
"list_parents": []
},
{
"id": 9,
"name": "zzz",
"list_parents": []
}
]
}]
}]
},
{
"id": 3,
"name": "foobar",
"list_parents": [{
"id": 6,
"name": "ttt",
"list_parents": [{
"id": 7,
"name": "xxx",
"list_parents": []
},
{
"id": 8,
"name": "yyy",
"list_parents": []
},
{
"id": 9,
"name": "zzz",
"list_parents": []
}
]
}]
},
{
"id": 6,
"name": "ttt",
"list_parents": [{
"id": 7,
"name": "xxx",
"list_parents": []
}, {
"id": 8,
"name": "yyy",
"list_parents": []
}, {
"id": 9,
"name": "zzz",
"list_parents": []
}]
},
{
"id": 7,
"name": "xxx",
"list_parents": []
},
{
"id": 8,
"name": "yyy",
"list_parents": []
},
{
"id": 9,
"name": "zzz",
"list_parents": []
}
]
So as you can see, it can end up with a pretty big tree with plenty of nodes. I need to get the info of all the parents for any part id that the user is requesting the info.
In the previous example, the user want to have the data for the part id=1, so the server gives me back this json data.
So in memory it's look like this tree. Part 1 have a parent, which is 3, Part 3 have a parent which is 6, part 6 could have 3 Parents which can be 10, 20, 30...
I'm trying to get this info in Javascript with a recursive function cause i need to build this tree and show it up to the user using JSTree plugin.
Essentially, a node is : <ul><li>NAME OF PART </li></ul>
but when a node have parents, i need to insert a <ul> inside the <li> tag.
For my example, the final html would be :
> <ul> <li> Part 1
> <ul>
> <li> Part 3
> <ul>
> <li> Part 6
> <ul>
> <li> Part xxx
> </li>
> <li> Part yyy
> </li>
> <li> Part zzz
> </li>
>
> </ul>
> </li>
> </ul>
> </li>
> </ul> </li> </ul>
Im trying to make a recursive function to build this html, but i cant get it working, my function look like this:
function get_data_html(obj, html){
let retval = "<ul>";
if (obj.list_parents.length < 0 )
return retval += "<li>" + obj.name + "</li></ul>";
else
$.each(obj.list_parents, function(index, item) {
get_data_html(item, retval);
});
}
instead of have the order of parents 1,3,6, i get like 1,6,3. Its building from the last parents to the first one, instead of from first to last.
Thanks you !
You could take the parent nodes (which looks like children) inside of the <li> tag.
function getNodes(array) {
return array.length
? '<ul><li>' + array.map(({ name, list_parents }) => name + getNodes(list_parents)).join('</li><li>') + '</li></ul>'
: '';
}
var data = [{ id: 1, name: "foo", list_parents: [{ id: 3, name: "foobar", list_parents: [{ id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }] }] }, { id: 2, name: "foo", list_parents: [{ id: 3, name: "foobar", list_parents: [{ id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }] }] }, { id: 3, name: "foobar", list_parents: [{ id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }] }, { id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }, { id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }];
document.body.innerHTML += getNodes(data);
I would like to know the correct way to create a nested Json tree Structure object in javascript.
data structure containing objects and arrays. How can I extract the information, i.e. access a specific or multiple values (or id)?
I have a very deep nested tree structure Json and I am given an object that can exist at any depth. I need to be able to iterate through all grandparent / parent / children nodes until I find the requested category, plus be able to capture its grandparent / parent / children categories all the way through.
//input data structure
[{
"Type": "grdparent1",
"name": "grdparent1",
"children": [{
"Type": "grdparent1",
"Id": 45,
"children": []
}, {
"Type": "grdparent1",
"Id": 46,
"children": [{
"Type": "parent1",
"Id": 54,
"children": [{
"Type": "child1",
"Id": 63,
"children": []
}, {
"Type": "child2",
"Id": 64,
"children": []
}]
}, {
"Type": "parent2",
"Id": 57,
"children": []
}]
}]
}, {
"Type": "grdparent2",
"name": "grdparent2",
"children": [{
"Type": "grdparent2",
"Id": 4,
"children": [{
"Type": "parent1",
"Id": 16,
"children": [{
"children": [],
"Type": "child1",
"Id": 28,
}]
}, {
"Type": "parent2",
"Id": 17,
"children": []
}]
}]
}, {
"Type": "grdparent3",
"name": "grdparent3",
"children": []
}, {
"Type": "grdparent4",
"name": "grdparent4",
"children": [{
"Type": "parent1",
"Id": 167,
"children": []
}]
}]
//output
[{
"grdparent1": [{
"Id": 45,
}, {
"Id": 46,
"parent1": [{
"Id": 54,
"child1": {
"Id": 63
}
}, {
"child2": {
"Id": 64
}
}]
}, {
"parent2": [{
"Id": 57
}]
}]
}, {
"grdparent2": [{
"Id": 4,
"parent1": [{
"Id": 16,
"child1": [{
"Id": 28
}]
}, {
"parent2": [{
"Id": 17
}]
}]
}, {
"grdparent4": [{
"parent1": [{
"Id": 167
}]
}]
}]
}]
Here is the code. You have the result in output variable:
var input = [{
"Type": "grdparent1",
"name": "grdparent1",
"children": [{
"Type": "grdparent1",
"Id": 45,
"children": []
}, {
"Type": "grdparent1",
"Id": 46,
"children": [{
"Type": "parent1",
"Id": 54,
"children": [{
"Type": "child1",
"Id": 63,
"children": []
}, {
"Type": "child2",
"Id": 64,
"children": []
}]
}, {
"Type": "parent2",
"Id": 57,
"children": []
}]
}]
}, {
"Type": "grdparent2",
"name": "grdparent2",
"children": [{
"Type": "grdparent2",
"Id": 4,
"children": [{
"Type": "parent1",
"Id": 16,
"children": [{
"children": [],
"Type": "child1",
"Id": 28,
}]
}, {
"Type": "parent2",
"Id": 17,
"children": []
}]
}]
}, {
"Type": "grdparent3",
"name": "grdparent3",
"children": []
}, {
"Type": "grdparent4",
"name": "grdparent4",
"children": [{
"Type": "parent1",
"Id": 167,
"children": []
}]
}];
var output = [];
for(var index = 0; index < input.length; index++) {
if(input[index].children.length > 0) {
var parsedObject = parseTopLevelItem(input[index]);
if(parsedObject) {
output[output.length] = parsedObject;
}
}
}
alert(JSON.stringify(output));
function parseTopLevelItem(item) {
var topLevelReturnObject;
if(item.children.length > 0) {
topLevelReturnObject = {};
for(var i = 0; i < item.children.length; i++) {
var parsedObject = parseChild(item.children[i]);
if(parsedObject) {
var key = parsedObject[0];
if(!topLevelReturnObject[key]) {
topLevelReturnObject[key] = [];
}
topLevelReturnObject[key][(topLevelReturnObject[key]).length] = parsedObject[1];
}
}
}
return topLevelReturnObject;
}
function parseChild(childElement){
var returnObject = [];
returnObject[0] = childElement.Type;
returnObject[1] = {};
returnObject[1].Id = childElement.Id;
for(var i = 0; i < childElement.children.length; i++) {
var parsedObject = parseChild(childElement.children[i]);
if(parsedObject) {
var key = parsedObject[0];
if(!returnObject[1][key]) {
returnObject[1][key] = [];
}
returnObject[1][key][(returnObject[1][key]).length] = parsedObject[1];
}
}
return returnObject;
}
As this has been brought back up...
Here's an approach which uses some fairly standard utility functions to allow for a fairly simple implementation of your node reformatting and wraps that in a simple transformation of your whole forest of nodes. (It's not a tree, precisely, as there isn't a single root. This is commonly called a "forest".)
// utility functions
const groupBy = (fn) => (xs) =>
xs .reduce ((a, x) => ({... a, [fn(x)]: [... (a [fn (x)] || []), x]}), {})
const mapObject = (fn) => (obj) =>
Object .fromEntries (Object .entries (obj) .map (([k, v]) => [k, fn(v)]))
// helper functions
const hasKids = ({children = []}) => children .length > 0
const hasGrandkids = ({children = []}) => children .some (hasKids)
// main functions
const reformat = ({Id, children = []}) => ({
...(Id ? {Id} : {}),
... mapObject (kids => kids .map (reformat)) (groupBy (o => o.Type) (children))
})
const transform = (nodes) =>
nodes .filter (hasGrandkids) .map (reformat)
// sample data
const input = [{Type: "grdparent1", name: "grdparent1", children: [{Type: "grdparent1", Id: 45, children: []}, {Type: "grdparent1", Id: 46, children: [{Type: "parent1", Id: 54, children: [{Type: "child1", Id: 63, children: []}, {Type: "child2", Id: 64, children: []}]}, {Type: "parent2", Id: 57, children: []}]}]}, {Type: "grdparent2", name: "grdparent2", children: [{Type: "grdparent2", Id: 4, children: [{Type: "parent1", Id: 16, children: [{children: [], Type: "child1", Id: 28}]}, {Type: "parent2", Id: 17, children: []}]}]}, {Type: "grdparent3", name: "grdparent3", children: []}, {Type: "grdparent4", name: "grdparent4", children: [{Type: "parent1", Id: 167, children: []}]}]
// demo
console .log (transform (input))
.as-console-wrapper {max-height: 100% !important; top: 0}
The two important utility functions used are
groupBy which groups an array into an object where the keys are generated by the supplied function mapped against the elements, and the values are arrays of the elements that generated that key. That is, for example,
groupBy (({name}) => name[0]) ([
{name: 'alice', age: 26},
{name: 'bob', age: 19},
{name: 'andrew', age: 31},
{name: 'carol', age: 22}
])
//=>
// {
// a: [{name: 'alice', age: 26}, {name: 'andrew', age: 31}],
// b: [{name: 'bob', age: 19}],
// c: [{name: 'carol', age: 22}]
// }
and mapObject, which maps a function over the values of an object, for example,
mapObject (n => n * n) ({a: 2, b: 3, c: 5, d: 7})
//=> {a: 1, b: 4, c: 25, d: 49}
We also have two helper functions which simply determine whether the node has children and whether it has grandchildren. We will use this in transform, to choose only those nodes with grandchildren. And that, in fact, is all transform does: it filters the list of nodes to include only those with grandchildren, and then it calls our reformat function on each of them. (It's not at all clear to me that this is what was desired in the first place. The question title and text refer to searching for nodes, but there is no evidence in any code of actual searching taking place. I'm guessing here in a way that matches the sample output and at least one other answer. This part would be easy enough to refactor.)
reformat is the main function here, formatting a node and recurring on each of its children. This is a fairly tricky reformat, turning child Type names into object keys and including Id in the output only when it's present in the input.
But the code isn't that complex, thanks to the use of the two helper functions. We group the children by their Type property, and then on the resulting object, we use mapObject to apply kids => kids .map (reformat) to each node.
groupBy and mapObject are general-purpose utility functions, and there are equivalents in major libraries like Underscore, Lodash, and Ramda (disclaimer: I'm a Ramda principal team member). But these implementation show that it's fairly easy to maintain your own versions.
This really was an interesting question! Took me a while to figure it out :)
I'm not a big fan of reinventing the wheel. So I'd suggest you use a library. We like object-scan for data processing since it is very powerful once you wrap your head around it. Having said that, this question was tricky! Here is how you could solve it
// const objectScan = require('object-scan');
const data = [{ Type: 'grdparent1', name: 'grdparent1', children: [{ Type: 'grdparent1', Id: 45, children: [] }, { Type: 'grdparent1', Id: 46, children: [{ Type: 'parent1', Id: 54, children: [{ Type: 'child1', Id: 63, children: [] }, { Type: 'child2', Id: 64, children: [] }] }, { Type: 'parent2', Id: 57, children: [] }] }] }, { Type: 'grdparent2', name: 'grdparent2', children: [{ Type: 'grdparent2', Id: 4, children: [{ Type: 'parent1', Id: 16, children: [{ children: [], Type: 'child1', Id: 28 }] }, { Type: 'parent2', Id: 17, children: [] }] }] }, { Type: 'grdparent3', name: 'grdparent3', children: [] }, { Type: 'grdparent4', name: 'grdparent4', children: [{ Type: 'parent1', Id: 167, children: [] }] }];
const convert = (input) => {
objectScan(['**[*]'], {
breakFn: ({ isMatch, key, value, context }) => {
if (isMatch) {
context[key.length] = value.children.map(({ Type }) => Type);
}
},
filterFn: ({ key, value, parent, property, context }) => {
const result = 'Id' in value ? { Id: value.Id } : {};
context[key.length].forEach((type, idx) => {
result[type] = (result[type] || []).concat(value.children[idx]);
});
if (Object.keys(result).length === 0) {
parent.splice(property, 1);
} else {
parent.splice(property, 1, result);
}
}
})(input, []);
};
convert(data);
console.log(data);
// => [ { grdparent1: [ { Id: 45 }, { Id: 46, parent1: [ { Id: 54, child1: [ { Id: 63 } ], child2: [ { Id: 64 } ] } ], parent2: [ { Id: 57 } ] } ] }, { grdparent2: [ { Id: 4, parent1: [ { Id: 16, child1: [ { Id: 28 } ] } ], parent2: [ { Id: 17 } ] } ] }, { parent1: [ { Id: 167 } ] } ]
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#13.7.1"></script>
Disclaimer: I'm the author of object-scan
Note that the result matches the result of the currently accepted answer.