I am trying to implement a checkbox tree that has the following data structure for items
const checkboxes = [{
field: 'ARTICLE',
id: 41,
name: 'Article',
parentId: null,
checked: false,
children: [
{
field: 'article.colorCode',
id: 42,
name: 'Color',
parentId: 41,
checked: false,
children: [
{
children: [],
field: 'red',
id: 43,
name: 'red',
parentId: 42,
checked: false
},
],
},
],
}]
Whenever I click on Article when it's unchecked, it should set checked property as true for Article and nested children and vice-versa(i.e. if a child is checked and it is the only child of its parent and that parent is also the only child of super parent further, all three would get checked)
Can someone please help me with a recursive function so that no matter what the depth of children is, all children get toggled? I just can't undrestand recursion.
I would break this down into three pieces. First, we need to be able to walk our nodes and alter the appropriate ones. Second, we need a way to, starting with some node in the hierarchy, invert the checked property on that node and pass this new value down through all its descendents. Third, we need to put this together with something that checks the nodes' ids to find where to start this process.
Here is a version which breaks it down this way:
const alterNodes = (pred, trans) => (nodes) => nodes .map (
node => pred (node) ? trans (node) : {...node, children: alterNodes (pred, trans) (node .children)}
)
const checkHierarchy = ({checked, children, ...rest}, value = !checked) => ({
... rest,
checked: value,
children: children .map (child => checkHierarchy (child, value))
})
const toggleHierarchy = (targetId, checkboxes) =>
alterNodes (({id}) => id == targetId, checkHierarchy) (checkboxes)
const checkboxes = [{field: 'ARTICLE', id: 41, name: 'Article', parentId: null, checked: false, children: [{field: 'article.colorCode', id: 42, name: 'Color', parentId: 41, checked: false, children: [{children: [], field: 'red', id: 43, name: 'red', parentId: 42, checked: false}]}]}]
console .log (toggleHierarchy (41, checkboxes))
.as-console-wrapper {max-height: 100% !important; top: 0}
Since you mentioned react, I assume you prefer immutable way to do that, since that tree might be stored in state.
The function you want to use is: toggleNodeInsideTree function, and you should pass it id of the node you want to toggle, and tree data.
let data = [
{
field: 'ARTICLE',
id: 41,
name: 'Article',
parentId: null,
checked: false,
children: [
{
field: 'red',
id: 43,
name: 'red',
parentId: 41,
checked: false,
},
{
field: 'article.colorCode',
id: 42,
name: 'Color',
parentId: 41,
checked: false,
children: [
{
children: [],
field: 'test',
id: 44,
name: 'red',
parentId: 42,
checked: false,
},
],
},
],
},
{
children: [],
field: 'red',
id: 45,
name: 'red',
parentId: 41,
checked: false,
},
];
let setCheckedValueForNodeAndChildren = (item, value) => {
if (item.children) {
return {
...item,
checked: value,
children: item.children.map((x) =>
setCheckedValueForNodeAndChildren(x, value)
),
};
} else {
return { ...item, checked: value };
}
};
let toggleNodeInsideTree = (id, tree) => {
return tree.map((x) => {
if (x.id === id) {
return setCheckedValueForNodeAndChildren(x, !x.checked);
}
if (x.children) {
return { ...x, children: toggleNodeInsideTree(id, x.children) };
}
return x;
});
};
console.log(toggleNodeInsideTree(42, data));
Related
Given the following structure and data:
interface GrandChild {
id: number,
values: Array<string>,
}
interface Child {
id: number,
subItems: Array<GrandChild>
}
interface Foo {
items: Array<Child>
}
const data: Foo = {
items: [
{ id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
{ id: 2, subItems: [ { id: 20, values: ['REMOVE', 'REMOVE'] }, { id: 21, values: ['REMOVE'] } ] },
{ id: 3, subItems: [ { id: 30, values: ['REMOVE'] }, { id: 31, values: ['REMOVE'] }, { id: 32, values: ['REMOVE', '32'] } ] },
]
};
How can I use the Array's methods (filter, map, some, etc.) to achieve the following result?
const expected: Foo = {
items: [
{ id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
{ id: 3, subItems: [ { id: 32, values: ['32'] } ] },
]
}
So far, I filtered the resulting data, removing the undesired elements, as following:
const filteredData: Foo = {
...data,
items: data.items.map(item => ({
...item,
subItems: item.subItems.map(subItem => ({
...subItem,
values: subItem.values.filter(value => value !== 'REMOVE')
}))
}))
}
Resulting:
{
items: [
{ id: 1, subItems: [ { id: 10, values: ['10', '100'] }, { id: 11, values: ['11', '110', '1100'] } ] },
{ id: 2, subItems: [ { id: 20, values: [] }, { id: 21, values: [] } ] },
{ id: 3, subItems: [ { id: 30, values: [] }, { id: 31, values: [] }, { id: 32, values: ['32'] } ] },
]
};
But, I cannot figure a way out to remove the empty subItems elements without looping through the result.
You can check online the above code here.
If you really want to do it just with filter and map, add a filter after each of your maps to remove subItems that have an empty values array and to remove items that have an empty subItems array:
const filteredData = {
...data,
items: data.items
.map((item) => ({
...item,
subItems: item.subItems
.map((subItem) => ({
...subItem,
values: subItem.values.filter((value) => value !== "REMOVE"),
}))
.filter(({ values }) => values.length > 0), // ***
}))
.filter(({subItems}) => subItems.length > 0), // ***
};
But:
When I have map followed by filter, I always ask myself if the data is large enough that I should avoid making multiple passes through it.
When I'm doing lots of nesting of map calls and such, I always ask myself if it would be clearer when reading the code later to use simpler, smaller loops.
Here's what you might do if answering "yes" to either or both of those questions:
const filteredData: Foo = {
...data,
items: [],
};
for (const item of data.items) {
const subItems: Array<GrandChild> = [];
for (const subItem of item.subItems) {
const values = subItem.values.filter((value) => value !== "REMOVE");
if (values.length) {
subItems.push({
...subItem,
values,
});
}
}
if (subItems.length > 0) {
filteredData.items.push({
...item,
subItems,
});
}
}
Hi everyone I need to get advice on how to realize such a function for searching and adding property if the children's scope has the same ids as the parent scope and add isDisable key.
The data which I got and I need to transform it with new property isDisable
const data = [
{
id: "MT1",
children: []
},
{
id: "MT2",
children: []
},
{
id: "MT4",
children: []
},
{
id: "1234",
children: [
{
id: "MT1",
children: []
},
{
id: "MT65",
children: []
},
]
},
{
id: "537465",
children: [{
id: "MT1",
children: []
},
{
id: "MT2",
children: [
{
id: "MT1",
children: []
},
{
id: "MT12",
children: []
}
]
},
]
}
]
This is some function for searching and adding a property to an item and result.
const someSearchFunction = (data) => {}
console.log(someSearchFunction(data))
const data = [
{
id: "MT1",
children: [],
isDisable: false
},
{
id: "MT2",
children: [],
isDisable: false
},
{
id: "MT4",
children: [],
isDisable: false
},
{
id: "MT12",
children: [],
isDisable: false
},
{
id: "1234",
children: [
{
id: "MT1",
children: [],
isDisable: true
},
{
id: "MT65",
children: [],
isDisable: false
},
]
},
{
id: "537465",
children: [
{
id: "MT1",
children: [],
isDisable: true
},
{
id: "42354322",
children: [
{
id: "MT1",
children: [],
isDisable: true
},
{
id: "MT12",
children: []
isDisable: false
}
]
},
]
}
]
Thanks!
We can do this by capturing the list of ids for the current level to pass on to the recursive call for our children.
Here is a version which does not mutate the input -- we're not barbarians! -- but returns a new tree with the isDisable property set appropiately.
const disableDupIds = (xs, ids = [], currLevel = xs .map (x => x .id)) => {
return xs .map (({id, children, ...rest}) => ({
id,
...rest,
isDisable: ids .includes (id),
children: disableDupIds (children, currLevel)
}))
}
const data = [{id: "MT1", children: []}, {id: "MT2", children: []}, {id: "MT4", children: []}, {id: "1234", children: [{id: "MT1", children: []}, {id: "MT65", children: []}]}, {id: "537465", children: [{id: "MT1", children: []}, {id: "MT2", children: [{id: "MT1", children: []}, {id: "MT12", children: []}]}]}]
console .log (disableDupIds (data))
.as-console-wrapper {max-height: 100% !important; top: 0}
We first capture the list of ids in our current level, then simply map over our elements, returning new versions with isDisable set true when our current id is in the list from the previous level, and recurring on our children, using our blacklist of current level ids.
Your expected output is not a valid array, better check it.
You can try this function:
const someSearchFunction = (data) => {
data.forEach(item => {
item.isDisable = false
item.children.some(child => {
if (data.some(parent => {
return parent.id === child.id
})) {
child.isDisable = true
} else {
child.isDisable = false
}
}
)
})
}
I have JS object like this one:
const networkTree = [
{
id: 10,
hasChildren: true,
children: [
{
id: 9,
hasChildren: true,
children: [
{
id: 7,
hasChildren: true,
children: [
{
id: 5,
hasChildren: false,
children: [],
},
{
id: 4,
hasChildren: false,
children: [],
},
],
},
{
id: 6,
hasChildren: true,
children: [
{
id: 3,
hasChildren: false,
children: [],
},
{
id: 2,
hasChildren: false,
children: [],
},
],
},
],
},
{
id: 8,
hasChildren: true,
children: [
{
id: 1,
hasChildren: false,
children: [],
},
{
id: 11,
hasChildren: false,
children: [],
},
],
},
],
},
];
I have to convert it with a function takes input js object like above to this order:
const myTreeData = [
{
name: 'Top Level',
children: [
{
name: 'Level 2: A',
},
{
name: 'Level 2: B',
},
],
},
];
I am stucked at this point:
const convertTree = (array) => (
treeDatas[];
treeData[];
for(i = 0 ; i < array.length ; i++) {
treeDatas.push(array[i]);
treeData[i].name.push(array[i].id);
}
);
If input networkTree[0].id is 15, myTreeData[0].name should be 15. I want to use id's as names on converted object. I don't need hasChildren boolean value. I will use converted object format with react-ds3-component. If you need more information about converted object format please check https://www.npmjs.com/package/react-d3-tree
If I understand you correctly you want to rename id to name and remove hasChildren? Then you can use this recursive function.
const convertTree = (tree) =>
tree.map((node) => ({
name: node.id,
children: convertTree(node.children)
}))
It's the same as this function, just less verbal.
const convertTree = (tree) => {
return tree.map((node) => {
return {
name: node.id,
children: convertTree(node.children)
}
})
}
I'm currently working through a problem that I'm having some trouble figuring out where I need to find a child node in an array of objects. The target could be one or many levels deep.
The issue is, once I find the object, I also need to push the path I took to get to that object into the resulting data array.
Currently, I have written code that can successfully find the child node:
const buildFullTree = (tree, cat, data = []) => {
let collection = [tree]
while (collection.length) {
let node = collection.shift()
if (node.id === cat.id) {
data.push(node)
}
collection.unshift(...node.children)
}
return data
}
However, this isn't sufficient in terms of getting the path taken to that object.
I'm pretty sure that I need to change this to a recursive depth-first search solution in order to achieve what I'm looking for, but I am not sure how to change the while loop to accomplish this.
If I understand your question correctly, then perhaps you could revise your path search function like so to achieve what you require:
const buildFullTree = (departmentTree, category, data = []) => {
const findPath = (node, category) => {
//If current node matches search node, return tail of path result
if (node.id === category.id) {
return [node]
} else {
//If current node not search node match, examine children. For first
//child that returns an array (path), prepend current node to that
//path result
for (const child of node.children) {
const childPath = findPath(child, category)
if (Array.isArray(childPath)) {
childPath.unshift(child)
return childPath
}
}
}
}
const foundPath = findPath(departmentTree, category)
// If search from root returns a path, prepend root node to path in
// data result
if (Array.isArray(foundPath)) {
data.push(departmentTree)
data.push(...foundPath)
}
return data
}
const departmentTree = {
id: 5,
title: 'department',
level: 1,
children: [{
id: 1,
parentId: 5,
title: 'category',
level: 2,
children: [{
id: 15,
parentId: 1,
title: 'subcategory',
level: 3,
children: []
}, {
id: 18,
parentId: 1,
level: 3,
title: 'subcategory',
children: []
}, {
id: 26,
parentId: 1,
level: 3,
title: 'subcategory',
children: [{
id: 75,
parentId: 26,
level: 4,
title: 'sub-subcategory',
children: []
}, {
id: 78,
parentId: 26,
level: 4,
title: 'sub-subcategory',
children: []
}]
}]
}, {
id: 23823,
title: 'category',
level: 2,
children: []
}, {
id: 9,
parentId: 5,
level: 2,
title: 'category',
children: [{
id: 48414,
parentId: 9,
level: 3,
title: 'subcategory',
children: []
}, {
id: 2414,
parentId: 9,
level: 3,
title: 'subcategory',
children: []
}, {
id: 42414,
parentId: 9,
level: 3,
title: 'subcategory',
children: [{
id: 2323213,
parentId: 42414,
level: 4,
title: 'sub-subcategory',
children: []
}, {
id: 322332,
parentId: 42414,
level: 4,
title: 'sub-subcategory',
children: []
}]
}]
}]
};
console.log('Path to 2323213:',
buildFullTree(departmentTree, {
id: 2323213
}).map(node => node.id).join(' -> '))
console.log('Path to 23823:',
buildFullTree(departmentTree, {
id: 23823
}).map(node => node.id).join(' -> '))
console.log('Path to -1 (non existing node):',
buildFullTree(departmentTree, {
id: -1
}).map(node => node.id).join(' -> '))
I have JavaScript tree data like this.
const tree = {
children:[
{id: 10, children: [{id: 34, children:[]}, {id: 35, children:[]}, {id: 36, children:[]}]},
{id: 10,
children: [
{id: 34, children:[
{id: 345, children:[]}
]},
{id: 35, children:[]},
{id: 36, children:[]}
]
},
{id: 11, children: [{id: 30, children:[]}, {id: 33, children:[]}, {id: 3109, children:[]}]}
],
id: 45
}
const getByID = (tree, id) => {
let result = null
if (id === tree.id) {
return tree
} else {
if(tree.children){
tree.children.forEach( node=> {
result = getByID(node, id)
})
}
return result
}
}
const find345 = getByID(tree, 345)
console.log(find345)
I was try to find item by its id from this tree. im using recursive function to iterate the tree and its children, but it wont find the item as i expected.
its always return null. expected to return {id: 345, children:[]}
You need to exit the loop by using a method which allows a short circuit on find.
The problem with visiting nodes but already found the node, is the replacement of the result with a later wrong result. You need to exit early with a found node.
Array#some allows to iterate and to exit the loop if a truty value is returned. In this case the result is truthy on find.
const tree = { children: [{ id: 10, children: [{ id: 34, children: [] }, { id: 35, children: [] }, { id: 36, children: [] }] }, { id: 10, children: [{ id: 34, children: [{ id: 345, children: [] }] }, { id: 35, children: [] }, { id: 36, children: [] }] }, { id: 11, children: [{ id: 30, children: [] }, { id: 33, children: [] }, { id: 3109, children: [] }] }], id: 45 };
const getByID = (tree, id) => {
let result = null
if (id === tree.id) {
return tree
} else {
if(tree.children){
tree.children.some(node => result = getByID(node, id));
// ^^^^ exit if found
// ^^^^^^^^^^^^^^^^^^^^^^^^^^ return & assign
}
return result;
}
}
const find345 = getByID(tree, 345)
console.log(find345)
A bit shorter
var tree = { children: [{ id: 10, children: [{ id: 34, children: [] }, { id: 35, children: [] }, { id: 36, children: [] }] }, { id: 10, children: [{ id: 34, children: [{ id: 345, children: [] }] }, { id: 35, children: [] }, { id: 36, children: [] }] }, { id: 11, children: [{ id: 30, children: [] }, { id: 33, children: [] }, { id: 3109, children: [] }] }], id: 45 },
getByID = (tree, id) => {
var temp;
return tree.id === id
? tree
: (tree.children || []).some(o => temp = getByID(o, id)) && temp;
};
console.log(getByID(tree, 345));
We can also use reduce method for recursive function
function findAllByKey(obj, keyToFind) {
return Object.entries(obj)
.reduce((acc, [key, value]) => (key === keyToFind)
? acc.concat(value)
: (typeof value === 'object' && value)
? acc.concat(findAllByKey(value, keyToFind))
: acc
, []) || [];
}