We Keep Coding

Group nested object using lodash

I have object like this.
data = [
{
id: "0",
name: "maths",
levelNo: 0,
level: null
},
{
id: "15",
name: "sceince",
levelNo: 0,
level: null
},
{
name: "algebra",
id: "1",
parentId: "0",
levelNo: 1,
level: {
id: "0",
name: "maths"
}
},
{
name: "alfunction",
id: "2",
parentId: "1",
levelNo: 2,
level: {
id: "1",
name: "alegera"
}
},
{
name: "bhumiti",
id: "3",
parentId: "1",
levelNo: 2,
level: {
id: "1",
name: "alegera"
}
},
{
name: "paryavan",
id: "4",
parentId: "0",
levelNo: 1,
level: {
id: "0",
name: "maths"
}
},
{
name: "trikon",
id: "5",
parentId: "3",
levelNo: 3,
level: {
id: "3",
name: "bhumiti"
}
}];
and convert this object into
subject = [
{
name: "maths",
id: "0",
items: [
{
id: "1",
name: "alegera",
items: [
{
name: "alfunction",
id: "2"
},
{
name: "bhumiti",
id: "3",
items: [
{
name: "trikon",
id: "5"
}
]
}
]
},
{
id: "4",
name: "paryavan"
}
]
}];

You could take a function which uses parentId and id without levelNo and level.
const
getTree = (data, root) => {
const t = {};
data.forEach(({ parentId, levelNo, level, ...o }) =>
((t[parentId] ??= {}).children ??= []).push(Object.assign(t[o.id] ??= {}, o))
);
return t[root].children;
},
data = [{ id: "0", name: "maths", levelNo: 0, level: null }, { id: "15", name: "sceince", levelNo: 0, level: null }, { name: "algebra", id: "1", parentId: "0", levelNo: 1, level: { id: "0", name: "maths" } }, { name: "alfunction", id: "2", parentId: "1", levelNo: 2, level: { id: "1", name: "alegera" } }, { name: "bhumiti", id: "3", parentId: "1", levelNo: 2, level: { id: "1", name: "alegera" } }, { name: "paryavan", id: "4", parentId: "0", levelNo: 1, level: { id: "0", name: "maths" } }, { name: "trikon", id: "5", parentId: "3", levelNo: 3, level: { id: "3", name: "bhumiti" } }],
tree = getTree(data);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Generate flat array of objects from dynamic nested array

I have array of objects like below. Here children element may deeply nested, it may contain other children element as well.
let response = [{
id: 4321,
name: 'Education',
parentId: null,
children: [{
id: 1234,
name: 'category1',
parentId: 4321,
children: [{
id: 8327548,
name: '001',
parentId: 1234,
}, {
id: 8327549,
name: '002',
parentId: 1234,
}],
}, {
id: 6786,
name: 'Associations',
parentId: 4321,
}, {
id: 8262439,
name: 'category1',
parentId: 4321,
}, {
id: 8245,
name: 'Rights',
parentId: 4321,
children: [{
id: 2447,
name: 'Organizations',
parentId: 8245,
}, {
id: 9525,
name: 'Services',
parentId: 8245,
}, {
id: 8448,
name: 'Organizations',
parentId: 8245,
}],
}, {
id: 8262446,
name: 'Women\'s Rights',
parentId: 4321,
}],
}, {
id: 21610,
name: 'Agriculture',
parentId: null,
children: [{
id: 3302,
name: 'categoryABC',
parentId: 21610,
children: [{
id: 85379,
name: 'categoryABC - General',
parentId: 3302,
}, {
id: 85380,
name: 'categoryABC Technology',
parentId: 3302,
}],
}, {
id: 8303,
name: 'Fungicides',
parentId: 21610,
children: [{
id: 8503,
name: 'Fungicides - General',
parentId: 8303,
}],
}],
}];
I want to make it flat array of objects but I want to add parent name (which parentId is null) to every objects inside that respective parent.
expected output:
[
{
id: 8327548,
name: "001",
parentId: 1234
mainParent: "Education"
}, {
id: 8327549,
name: "002",
parentId: 1234,
mainParent: "Agriculture"
},
// ...OTHER OBJECTS....
]
What I have done so far
function flat(array) {
var result = [];
array.forEach(function (a) {
result.push(a);
if (Array.isArray(a.children)) {
result = result.concat(flat(a.children));
delete a.children;
}
});
return result;
}
It's giving the flat array of objects but I'm not able to add parent name property to every objects.
Can someone please help me?

You could take a recursive approach an handover the first found name as mainParent.
const
flat = mainParent => o => o.children
? o.children.flatMap(flat(mainParent || o.name))
: { ...o, mainParent },
response = [{ id: 4321, name: "Education", parentId: null, children: [{ id: 1234, name: "category1", parentId: 4321, children: [{ id: 8327548, name: "001", parentId: 1234 }, { id: 8327549, name: "002", parentId: 1234 }] }, { id: 6786, name: "Associations", parentId: 4321 }, { id: 8262439, name: "category1", parentId: 4321 }, { id: 8245, name: "Rights", parentId: 4321, children: [{ id: 2447, name: "Organizations", parentId: 8245 }, { id: 9525, name: "Services", parentId: 8245 }, { id: 8448, name: "Organizations", parentId: 8245 }] }, { id: 8262446, name: "Women's Rights", parentId: 4321 }] }, { id: 21610, name: "Agriculture", parentId: null, children: [{ id: 3302, name: "categoryABC", parentId: 21610, children: [{ id: 85379, name: "categoryABC - General", parentId: 3302 }, { id: 85380, name: "categoryABC Technology", parentId: 3302 }] }, { id: 8303, name: "Fungicides", parentId: 21610, children: [{ id: 8503, name: "Fungicides - General", parentId: 8303 }] }] }],
result = response.flatMap(flat());
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

This is a fairly clean recursion, stopping when there are no children in the node. We capture the first name value found along the hierarchy and carry it through.
const flat = (xs, name = null) =>
xs .flatMap (x => x .children
? flat (x .children, name || x .name)
: [{...x, mainParent: name}]
)
const response = [{id: 4321, name: "Education", parentId: null, children: [{id: 1234, name: "category1", parentId: 4321, children: [{id: 8327548, name: "001", parentId: 1234}, {id: 8327549, name: "002", parentId: 1234}]}, {id: 6786, name: "Associations", parentId: 4321}, {id: 8262439, name: "category1", parentId: 4321}, {id: 8245, name: "Rights", parentId: 4321, children: [{id: 2447, name: "Organizations", parentId: 8245}, {id: 9525, name: "Services", parentId: 8245}, {id: 8448, name: "Organizations", parentId: 8245}]}, {id: 8262446, name: "Women's Rights", parentId: 4321}]}, {id: 21610, name: "Agriculture", parentId: null, children: [{id: 3302, name: "categoryABC", parentId: 21610, children: [{id: 85379, name: "categoryABC - General", parentId: 3302}, {id: 85380, name: "categoryABC Technology", parentId: 3302}]}, {id: 8303, name: "Fungicides", parentId: 21610, children: [{id: 8503, name: "Fungicides - General", parentId: 8303}]}]}]
console .log (flat (response))
.as-console-wrapper {max-height: 100% !important; top: 0}

Less obscure, but still fairly concise.
const response = [{ id: 4321, name: 'Education', parentId: null, children: [{ id: 1234, name: 'category1', parentId: 4321, children: [{ id: 8327548, name: '001', parentId: 1234 }, { id: 8327549, name: '002', parentId: 1234 }] }, { id: 6786, name: 'Associations', parentId: 4321 }, { id: 8262439, name: 'category1', parentId: 4321 }, { id: 8245, name: 'Rights', parentId: 4321, children: [{ id: 2447, name: 'Organizations', parentId: 8245 }, { id: 9525, name: 'Services', parentId: 8245 }, { id: 8448, name: 'Organizations', parentId: 8245 }] }, { id: 8262446, name: 'Women\'s Rights', parentId: 4321 }] }, { id: 21610, name: 'Agriculture', parentId: null, children: [{ id: 3302, name: 'categoryABC', parentId: 21610, children: [{ id: 85379, name: 'categoryABC - General', parentId: 3302 }, { id: 85380, name: 'categoryABC Technology', parentId: 3302 }] }, { id: 8303, name: 'Fungicides', parentId: 21610, children: [{ id: 8503, name: 'Fungicides - General', parentId: 8303 }] }] }];
function flatten(arr, mainParent = null) {
if (!arr) return;
let result = [];
for (const obj of arr) {
result.push(...(flatten(obj.children, mainParent ?? obj.name) ?? [{ ...obj, mainParent }]));
}
return result;
}
console.log(flatten(response));
.as-console-wrapper { max-height: 100% !important; top: 0; }

A possible solution could be based entirely on a single, though recursively implemented, reduce task, where the accumulating and recursively passed down object carries both information, the mainParent value and the recursively collected final result ...
function recursivelyReassambleAndCollectChildlessItems(
{ mainParent, result }, { children, ...item }
) {
result = result.concat(children && children.reduce(
recursivelyReassambleAndCollectChildlessItems, {
// was:
// mainParent: mainParent ?? item.name,
/**
* OP quote:
* "... but I want to add parent name
* (which parentId is null) to every
* objects inside that respective parent."
*/
mainParent: item.parentId === null ? item.name : mainParent,
result: [],
}
).result || { mainParent, ...item });
return { mainParent, result };
}
const response = [{
id: 4321,
name: 'Education',
parentId: null,
children: [{
id: 1234,
name: 'category1',
parentId: 4321,
children: [{
id: 8327548,
name: '001',
parentId: 1234,
}, {
id: 8327549,
name: '002',
parentId: 1234,
}],
}, {
id: 6786,
name: 'Associations',
parentId: 4321,
}, {
id: 8262439,
name: 'category1',
parentId: 4321,
}, {
id: 8245,
name: 'Rights',
parentId: 4321,
children: [{
id: 2447,
name: 'Organizations',
parentId: 8245,
}, {
id: 9525,
name: 'Services',
parentId: 8245,
}, {
id: 8448,
name: 'Organizations',
parentId: 8245,
}],
}, {
id: 8262446,
name: 'Women\'s Rights',
parentId: 4321,
}],
}, {
id: 21610,
name: 'Agriculture',
parentId: null,
children: [{
id: 3302,
name: 'categoryABC',
parentId: 21610,
children: [{
id: 85379,
name: 'categoryABC - General',
parentId: 3302,
}, {
id: 85380,
name: 'categoryABC Technology',
parentId: 3302,
}],
}, {
id: 8303,
name: 'Fungicides',
parentId: 21610,
children: [{
id: 8503,
name: 'Fungicides - General',
parentId: 8303,
}],
}],
}];
console.log(response
.reduce(recursivelyReassambleAndCollectChildlessItems, { result: [] })
.result
)
.as-console-wrapper { min-height: 100%!important; top: 0; }

Change object structure Javascript

I have an array and I want to override the object attributes
This the main data
const Data = {
"id": "1",
"name": "USA",
"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }],
"children": [
{ "id": "1" , "name": "DC" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id:2, name: "3 qst" }]},
{ "id": "2" , "name": "Florida" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }]}
]
}
I want to change in every question instead of name I want to put questionName like this
{ id: 1, questionName: "1 qst" }
I was able to change it in first object question through this code
let dataFiltred = Data[0]?.questions?.map((item) => {
return {
questionName: item.name,
id: item.id,
}
})
But I am struggling to change it in children question

function mapQuestionObject({ name, id }) {
return { id, questionName: name };
}
const mapped = {
...Data,
questions: Data.questions.map(mapQuestionObject),
children: Data.children.map(child => ({
...child,
questions: child.questions.map(mapQuestionObject),
}),
};

Map each questions array to a new array and change the name property in the mapped value.
const data = {
"id": "1",
"name": "USA",
"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }],
"children": [
{ "id": "1" , "name": "DC" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id:2, name: "3 qst" }]},
{ "id": "2" , "name": "Florida" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }]}
]
};
const newData = {
...data,
questions: data.questions.map(({ name: questionName, ...rest }) => ({
...rest,
questionName,
})),
children: data.children.map(child => ({
...child,
questions: child.questions.map(({ name: questionName, ...rest }) => ({
...rest,
questionName,
}))
})),
};
console.log(newData);
Since the questions mapping is the same callback you can factor it out to make your code more DRY
const data = {
"id": "1",
"name": "USA",
"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }],
"children": [
{ "id": "1" , "name": "DC" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id:2, name: "3 qst" }]},
{ "id": "2" , "name": "Florida" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }]}
]
};
const mapQuestions = arr => arr.map(({ name: questionName, ...rest }) => ({
...rest,
questionName,
}));
const newData = {
...data,
questions: mapQuestions(data.questions),
children: data.children.map(child => ({
...child,
questions: mapQuestions(child.questions),
})),
};
console.log(newData);

Reformat Array of objects using array.map

I receive the result of an API call with the following array, I am trying to reformat this Array from:
const items = [
{
id: 1,
name: "Item 1",
section: { name: "Section A" }
},
{
id: 2,
name: "Item 2",
section: { name: "Section A" }
},
{
id: 3,
name: "Item 3",
section: { name: "Section A" }
},
{
id: 4,
name: "Item 4",
section: { name: "Section B" }
},
{
id: 5,
name: "Item 5",
section: { name: "Section B" }
},
{
id: 6,
name: "Item 6",
section: { name: "Section C" }
},
{
id: 7,
name: "Item 7",
section: { name: "Section C" }
}
];
To Array this:
const items = [
{
section: "Section A",
items: [
{
id: 1,
item: "Item 1"
},
{
id: 2,
item: "Item 2"
},
{
id: 3,
item: "Item 3"
}]
},
{
section: "Section B",
items: [
{
id: 4,
item: "Item 4"
},
{
id: 5,
item: "Item 5"
}]
},
{
section: "Section C",
items: [
{
id: 6,
item: "Item 6"
},
{
id: 7,
item: "Item 7"
}]
},
]
I have tried the following function:
const result = Array.from(new Set(items.map(s => s.section.name)))
.map(section => {
return {
section: section,
items: Array.from(new Set(items.map(function (item) {
if (item.section.name === section) {
return item.name
}
}
)))
}
})
This gives me the following result, which is close but I am not sure why I am getting the undefined values?
//[{section: "Section A", items: ["Item 1", "Item 2", "Item 3", undefined]},{section: "Section B", items:[undefined, "Item 4", "Item 5"]},{section: "Section C", items: [undefined, "Item 6", "Item 7"]}]
Can anyone assist me to correct this function or suggest a better approach?

You could take an object for grouping and get the values as result.
const
items = [{ id: 1, name: "Item 1", section: { name: "Section A" } }, { id: 2, name: "Item 2", section: { name: "Section A" } }, { id: 3, name: "Item 3", section: { name: "Section A" } }, { id: 4, name: "Item 4", section: { name: "Section B" } }, { id: 5, name: "Item 5", section: { name: "Section B" } }, { id: 6, name: "Item 6", section: { name: "Section C" } }, { id: 7, name: "Item 7", section: { name: "Section C" } }],
result = Object.values(items.reduce((r, { section: { name: section }, ...item }) => {
if (!r[section]) r[section] = { section, items: [] };
r[section].items.push(item);
return r;
}, {}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can use Array prototype methods reduce() and findIndex()
like this:
const items = [
{
id: 1,
name: "Item 1",
section: { name: "Section A" }
},
{
id: 2,
name: "Item 2",
section: { name: "Section A" }
},
{
id: 3,
name: "Item 3",
section: { name: "Section A" }
},
{
id: 4,
name: "Item 4",
section: { name: "Section B" }
},
{
id: 5,
name: "Item 5",
section: { name: "Section B" }
},
{
id: 6,
name: "Item 6",
section: { name: "Section C" }
},
{
id: 7,
name: "Item 7",
section: { name: "Section C" }
}
];
const res = items.reduce((acc, curr) => {
const index = acc && acc.findIndex(({ section }) => section === curr.section.name)
if(index !== -1) {
acc[index].items.push({ id: curr.id, item: curr.name });
}
else {
acc.push({section: curr.section.name, items: [{ id: curr.id, item: curr.name }]});
}
return acc;
}, []);
console.log(res);

kendoTreeList - aggregate not working properly

Please help me, I am stuck with aggregates for kendoTreeList -
I create kendoTreeList, but failed to calculate sum for groups.
$(document).ready(function () {
var _jsondata = [
{ ID: 1, Name: "Parent 1", Amount: "200", parentId: null },
{ ID: 2, Name: "Parent 2", Amount: "500", parentId: null },
{ ID: 11, Name: "Child 11", Amount: "50", parentId: 1 },
{ ID: 12, Name: "Child 12", Amount: "150", parentId: 1 },
{ ID: 21, Name: "Child 21", Amount: "100", parentId: 2 },
{ ID: 22, Name: "Child 22", Amount: "200", parentId: 2 },
{ ID: 23, Name: "Child 23", Amount: "200", parentId: 2 }
];
var dataSource = new kendo.data.TreeListDataSource({
data : _jsondata,
schema : { model: { id: "ID", expanded: true }},
aggregate : [
{ field: "Amount", aggregate: "sum"}
]
});
$("#treelist").kendoTreeList({
dataSource : dataSource,
columns : [
{ field: "Name" , nullable: false },
{ field: "Amount", footerTemplate: "#= sum #"}
]
});
});
this give result as -

Since Amount represented in _jsondata as string, you need to define it in schema.model as number
schema: {
model: {
id: "ID",
expanded: true,
fields: {
Amount: { type: 'number' }
}
}
},