kendoTreeList - aggregate not working properly - javascript

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' }
}
}
},

Related

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

Filter Array of objects based on repetitive values

I am trying to populate an array of objects in the UI which has repetitive properties of title with teacher and students value.
Please find the original data -
const data = [
{
id: "1",
title: "Principle",
name: "John Doe",
children: [
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Bruce Wayne",
children: [
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Dick Grayson",
},
{
id: "random id",
title: "Student",
name: "Tim Drake",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
],
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Barry Allen",
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
],
},
];
which contains principal, teacher, and students. For eg., if the teacher name is repetitive and is coming like for eg., 5 times in data for Clark Kent, then I wish to restrict the data to show 3 entries and add one object, to specify that there are more entries with this name. like below -
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
more: true,
remaining: 2,
},
In the end, so my data can look like the below format to populate in UI -
const data = [
{
id: "1",
title: "Principle",
name: "John Doe",
children: [
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Bruce Wayne",
children: [
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Dick Grayson",
},
{
id: "random id",
title: "Student",
name: "Tim Drake",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
},
{
id: "random id",
title: "Student",
name: "Jason Todd",
more: true,
remaining: 2,
},
],
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Barry Allen",
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
},
{
id: "random id",
title: "Teacher",
name: "Clark Kent",
more: true,
remaining: 2,
},
],
},
];
Please help.

Some assumptions:
id in "more" object is just copied from the first excessive person.
No children field is expected in excessive persons.
const data = [
{
id: '1',
title: 'Principle',
name: 'John Doe',
children: [
{
id: 'random id',
title: 'Teacher',
name: 'Clark Kent',
},
{
id: 'random id',
title: 'Teacher',
name: 'Bruce Wayne',
children: [
{
id: 'random id',
title: 'Student',
name: 'Jason Todd',
},
{
id: 'random id',
title: 'Student',
name: 'Dick Grayson',
},
{
id: 'random id',
title: 'Student',
name: 'Tim Drake',
},
{
id: 'random id',
title: 'Student',
name: 'Jason Todd',
},
{
id: 'random id',
title: 'Student',
name: 'Jason Todd',
},
{
id: 'random id',
title: 'Student',
name: 'Jason Todd',
},
{
id: 'random id',
title: 'Student',
name: 'Jason Todd',
},
],
},
{
id: 'random id',
title: 'Teacher',
name: 'Clark Kent',
},
{
id: 'random id',
title: 'Teacher',
name: 'Barry Allen',
},
{
id: 'random id',
title: 'Teacher',
name: 'Clark Kent',
},
{
id: 'random id',
title: 'Teacher',
name: 'Clark Kent',
},
{
id: 'random id',
title: 'Teacher',
name: 'Clark Kent',
},
],
},
];
const result = reduceRepetitions(data, 'name', 3);
console.log(JSON.stringify(result, null, ' '));
function reduceRepetitions(array, checkKey, maxRepetitions) {
const reduced = [];
const counter = {};
for (const person of array) {
const checkValue = person[checkKey];
counter[checkValue] ??= { count: 0, moreObject: null };
counter[checkValue].count++;
if (counter[checkValue].count <= maxRepetitions) {
reduced.push({
...person,
...person.children ?
{ children: reduceRepetitions(person.children, checkKey, maxRepetitions) } :
{},
});
} else if (!counter[checkValue].moreObject) {
counter[checkValue].moreObject = { ...person, more: true, remaining: 1 };
reduced.push(counter[checkValue].moreObject);
} else {
counter[checkValue].moreObject.remaining++;
}
}
return reduced;
}

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

Refactor traversing over an array of objects using spread operator

function main() {
let yesterdaysOrders = [
{
id: 1,
orderLines: [{
itemName: "Item 01",
quantity: 1
},
{
itemName: "Item 02",
quantity: 3
},
{
itemName: "Item 03",
quantity: 25
},
{
itemName: "Item 04",
quantity: 12
},
],
},
{
id: 2,
orderLines: [{
itemName: "Item 01",
quantity: 1
},
{
itemName: "Item 08",
quantity: 42
},
{
itemName: "Item 09",
quantity: 13
},
{
itemName: "Item 12",
quantity: 37
},
],
},
{
id: 3,
orderLines: [{
itemName: "Item 12",
quantity: 16
}, ],
},
{
id: 4,
orderLines: [{
itemName: "Item 10",
quantity: 11
},
{
itemName: "Item 11",
quantity: 10
},
],
},
{
id: 5,
orderLines: [{
itemName: "Item 06",
quantity: 7
},
{
itemName: "Item 07",
quantity: 2
},
{
itemName: "Item 12",
quantity: 14
},
],
},
{
id: 6,
orderLines: [{
itemName: "Item 05",
quantity: 17
}, ],
},
{
id: 7,
orderLines: [{
itemName: "Item 03",
quantity: 5
},
{
itemName: "Item 07",
quantity: 2
},
],
},
{
id: 8,
orderLines: [{
itemName: "Item 02",
quantity: 13
},
{
itemName: "Item 07",
quantity: 7
},
{
itemName: "Item 09",
quantity: 2
},
],
},
{
id: 9,
orderLines: [{
itemName: "Item 01",
quantity: 4
},
{
itemName: "Item 06",
quantity: 17
},
{
itemName: "Item 07",
quantity: 3
},
],
},
{
id: 10,
orderLines: [{
itemName: "Item 11",
quantity: 12
},
{
itemName: "Item 12",
quantity: 1
},
],
}
],
result = Array.from(
yesterdaysOrders.reduce((acc, {
orderLines
}) => {
orderLines.forEach(({
itemName,
quantity
}) => acc.set(itemName, (acc.get(itemName) || 0) + quantity));
return acc;
}, new Map), ([itemName, quantity]) => ({
itemName,
quantity
}));
}
I have this function and at the end, I'm grabbing the itemName and quantity so that eventually I can display them in the DOM.
I'm looking to refactor the result = Array.from.... to be used with a spread operator, along with the already implemented destructuring.
How would I go about starting this off?
I'm understanding that the spread operator allows anything that is iterable to be able to be expanded.
Also, within the main function, after I place the comma and define my new function with result, what is the explanation for not needing a var, let, or const before it?

Categories