I have an object in javascript:
{
name: "General",
icon: "general",
children: [
{
name: "Line 1",
icon: "line",
children: [
{
name: "Area 1",
icon: "area",
children: [
{ name: "Y", icon: "x" },
{ name: "Z", icon: "z" },
],
},
{ name: "Area 2", icon: "line" },
],
},
{
name: "Line 2,
icon: "line",
children: [{ name: "Area 3", icon: "area" }],
},
],
},
I am trying to do hierarchical structure filtering. After entering the name of the node in the search input, the hierarchical structure should disappear and a div should appear with the name of the node and the path in the hierarchy e.g. searche: Area 1,
Area1 | General -> Line1.
Is there any way to get information about an object that is a parent in a structure?
Or should I just give each element an id and a parenId to refer to the parent
Related
I have a tree data like this:
var tree = [
{
id:"11",
text: "Parent 1",
type:"Parent",
nodeSelected:false,
nodes: [
{
text: "Child 1",
parentId: "11",
id:"21",
nodeSelected:false,
type: "Child",
nodes: [
{
id:"36",
text: "Grandchild 1",
parentId: "21",
nodeSelected:false,
nodes:[],
type: "Grandchild"
},
{
id:"38",
text: "Grandchild 2",
parentId: "21",
nodes:[],
nodeSelected:false,
type: "Grandchild"
}
]
},
{
id:"43",
text: "Child 2",
nodeSelected:false,
parentId:"11",
type: "Child",
nodes: [
{
id:"52",
parentId:"43",
text: "Grandchild 1 of child 2",
nodeSelected:false,
nodes:[],
type: "Grandchild"
}
]
}
]
},
{
id:"46",
text: "Parent 2",
nodeSelected:false,
type: "Parent",
nodes:[]
},
{
id:"48",
text: "Parent 3",
nodeSelected:false,
type: "Parent",
node: [
{
id:"70",
text: "child 3",
parentId: "48",
type: "Child",
nodeSelected:false,
nodes:[]
}
]
}
];
All of the nodeSelected are false.
I have group of Ids in form of an array.
groupedIds=["11","21","43","52","48"];
I want to do nodeSelected property true based on groupId array with some condition.
the condition is such that if a parentId is mentioned along with its children ids then nodeSelected property of parent should remain
false and child's nodeSelected should be true (and its nodes nodeSelected should also be 'true').
Or else whole parent nodes nodeSelected should be true(along with it nodes).
So the result will be like this:
var resultArray = [
{
id:"11",
text: "Parent 1",
type:"Parent",
nodeSelected:false,
nodes: [
{
text: "Child 1",
parentId: "11",
id:"21",
nodeSelected:true,
type: "Child",
nodes: [
{
id:"36",
text: "Grandchild 1",
parentId: "21",
nodeSelected:true,
type: "Grandchild"
},
{
id:"38",
text: "Grandchild 2",
parentId: "21",
nodeSelected:true,
type: "Grandchild"
}
]
},
{
id:"43",
text: "Child 2",
nodeSelected:false,
parentId:"11",
type: "Child",
nodes: [
{
id:"52",
parentId:"43",
text: "Grandchild 1 of child 2",
nodeSelected:true,
type: "Grandchild"
}
]
}
]
},
{
id:"46",
text: "Parent 2",
nodeSelected:false,
type: "Parent"
},
{
id:"48",
text: "Parent 3",
nodeSelected:true,
type: "Parent",
node: [
{
id:"70",
text: "child 3",
parentId: "48",
type: "Child",
nodeSelected:true
}
]
}
];
(My try) Although incomplete but something like this we can do
tree.forEach((Parent) => {
if (groupedIds.includes(Parent.id)) {
let isSomeChildSelected = Parent.nodes.some((loc) => groupedIds.includes(loc.id));
if (isSomeChildSelected) {
Parent.nodes.forEach((child) => {
if (groupedIds.includes(child.id)) {
let isSomeGrandChildSelected = child.nodes.some((grandchild) => groupedIds.includes(grandchild.id));
if (isSomeGrandChildSelected) {
child.nodes.forEach((grandchild) => {
if (groupedIds.includes(grandchild.id)) {
grandchild.isSelected = true;
}
})
} else {
child.isSelected = true;
child.nodes.forEach((grandchild) => {
grandchild.isSelected = true;
})
}
}
})
} else {
Parent.isSelected = true;
Parent.nodes.forEach((child) => {
child.isSelected = true;
child.nodes.forEach((grandchild) => {
grandchild.isSelected = true;
})
})
}
}
})
The above tried method solves the issue to some extent, but it is a bit complex.
Any help would be much appreciated. Thanks!
I'm not going to do it for you (not out of malice, just because I'm not 100% sure I understand the question!), but I'll hopefully give you a big point in the right direction.
When traversing trees, 90% of the time you need something called recursion. Recursion looks like this:
function walk(items){
items.forEach(items => {
if(item.hasChildrenOrSomething){
// notice the function calls itself:
walk(item.children);
}
// Do something with item
});
}
walk(tree);
There is one important thing to note here, which is that if you do some logic after calling the function inside itself, all the children of the current item will have that logic applied. So, here we go – in your case you want something like this:
const walk = (branch) => {
branch.forEach(node => {
// Check if this object even has children:
if(node.hasOwnProperty('nodes') && node.nodes.length){
walk(node.nodes);
// Do your node.nodes.every check here
}
// Now check if this is in the array
});
}
walk(tree);
If you've used recursion before, sorry, this whole post was probably just super patronising and has missed the point of your question. If you haven't, then can I just say I am a) jealous of you for getting to experience the feeling of something so elegant for the first time and b) sorry for you for having to unravel the mind boggling nature of them.
This gives me output what I want(with recursion):
var tree = [
{
id:"11",
text: "Parent 1",
type:"Parent",
nodeSelected:false,
nodes: [
{
text: "Child 1",
parentId: "11",
id:"21",
nodeSelected:false,
type: "Child",
nodes: [
{
id:"36",
text: "Grandchild 1",
parentId: "21",
nodeSelected:false,
nodes:[],
type: "Grandchild"
},
{
id:"38",
text: "Grandchild 2",
parentId: "21",
nodes:[],
nodeSelected:false,
type: "Grandchild"
}
]
},
{
id:"43",
text: "Child 2",
nodeSelected:false,
parentId:"11",
type: "Child",
nodes: [
{
id:"52",
parentId:"43",
text: "Grandchild 1 of child 2",
nodeSelected:false,
nodes:[],
type: "Grandchild"
}
]
}
]
},
{
id:"46",
text: "Parent 2",
nodeSelected:false,
type: "Parent",
nodes:[]
},
{
id:"48",
text: "Parent 3",
nodeSelected:false,
type: "Parent",
nodes: [
{
id:"70",
text: "child 3",
parentId: "48",
type: "Child",
nodeSelected:false,
nodes:[]
}
]
}
];
groupedIds=["11","21","43","52","48"];
var selectAllNode=array=> array.forEach((value)=>{ value.nodeSelected=true; value.nodes? selectAllNode(value.nodes) : [] });
var getFilteredData = array => array.forEach((ele)=>{
if(groupedIds.includes(ele.id)){
let isSomeSelected = ele.nodes.some((val)=>groupedIds.includes(val.id));
if(isSomeSelected){
getFilteredData(ele.nodes);
} else {
ele.nodeSelected=true;
selectAllNode(ele.nodes);
}
}
});
getFilteredData(tree);
console.log(tree);
I want to filter out of a deeply nested data structure all the objects that match a rule. I know there are similar examples to delete a particular key of nested object, but I haven't been able to implement the solutions. The data structure will never be infinite, but it can be very deep (more than 10 levels)
Here are the types:
export type DataStructure = Entry[]
export interface Entry {
id: string
text: string
type: 1 | 2
children?: Entry[]
}
So an entry array could be:
[
{
id: "1",
type: 1,
text: "Node 1",
children: [
{
id: "1.1",
type: 1,
text: "Node 1.1",
children: [
{
id: "1.1.1",
type: 2,
text: "Node 1.1.1",
children: []
}
],
},
{
id: "1.2",
type: 1,
text: "Node 1.2",
children: [
{
id: "1.2.1",
type: 2,
text: "Node 1.2.1",
children: [],
},
{
id: "1.2.2",
type: 1,
text: "Node 1.2.2",
children: [],
}
]
}
]
}
]
The expected output array, provided the rule type !== 2 would be:
[
{
id: "1",
type: 1,
text: "Node 1",
children: [
{
id: "1.2",
type: 1,
text: "Node 1.2",
children: [
{
id: "1.2.2",
type: 1,
text: "Node 1.2.2",
children: [],
}
]
}
]
}
]
I haven't been able to implement recursion to do it, the arrays keep showing all the entries
I don't mind using lodash if there is a built-in function. Thanks!
If you want to filter based on type:
function test() {
const test = [
{
id: "1",
type: 1,
text: "Node 1",
children: [
{
id: "1.1",
type: 1,
text: "Node 1.1",
children: [
{
id: "1.1.1",
type: 1,
text: "Node 1.1.1",
children: []
}
],
},
{
id: "1.2",
type: 2,
text: "Node 1.2",
children: [
{
id: "1.2.1",
type: 2,
text: "Node 1.2.1",
children: [],
},
{
id: "1.2.2",
type: 2,
text: "Node 1.2.2",
children: [],
}
]
}
]
}
];
console.log(JSON.stringify(filterData(test, 2), 0, 4))
console.log('test: ', test);
}
and filter method:
function filterData(data, type) {
var r = data.filter(function(o) {
if (o.children)
o.children = filterData(o.children, type);
return o.type != type
})
return r;
}
I had reformat my data in mongodb using ancestors path to ensure the relationship of each nodes & intend to show it in a organisation tree view.
[
{
"isActive": true,
"ancestorsPath": [],
"studentGroup": [
"t2-001",
"t2-002",
"t2-003"
],
"_id": "33d9704f34901855c911e433",
"email": "user5#test.com",
"agentId": "t1-001"
},
{
"isActive": true,
"ancestorsPath": [],
"studentGroup": [
"t2-101",
"t2-102",
"t2-103"
],
"_id": "5cdb0664c409e90e4fe21133",
"email": "user5#test.com",
"agentId": "t1-100",
},
{
"isActive": true,
"ancestorsPath": [
"t1-001"
],
"studentGroup": [
"t3-001",
"t3-002",
"t3-003"
],
"_id": "5cdb06dec409e90e4fe21134",
"email": "user5#test.com",
"agentId": "t2-001",
}
]
However the data in organisation tree is using a format as below:
id: "T1-001",
name: "user5#test.com",
title: "general manager",
children: [
{
id: "t2-001",
name: "Bo Miao",
title: "department manager",
number: "MYR 2,000"
},
{
id: "t2-002",
name: "Su Miao",
title: "department manager",
children: [
{ id: "t3-001", name: "Tie Hua", title: "senior engineer" },
{
id: "t3-002",
name: "Hei Hei",
title: "senior engineer",
children: [
{ id: "6", name: "Pang Pang", title: "engineer" },
{ id: "7", name: "Xiang Xiang", title: "UE engineer" }
]
}
]
},
{ id: "t2-003", name: "Hong Miao", title: "department manager" }
How should I format my data? Can anyone give me some pointers so i can study further?
I have this fancy tree
$('#my_id').fancytree({
checkbox: true,
selectMode: 3,
source :myDataSource,
extensions: ['filter'],
quicksearch: true,
});
myDataSource = [
{
title: "Everything",
id:"11",
folder:true,
children:[
{
title: "Node 1",
id: "1"
},
{
title: "Folder 2",
id: "2",
folder: true,
children: [
{
title: "Node 2.1",
id: "3",
myOwnAttr: "abc"
},
{
title: "Node 2.2",
id: "4"
}
]
}
]
}
]
But the fancytree is not showing checkboxes to its nodes. What am I missing?
Also when I try to access the selected nodes using $('#my_id').fancytree('getTree').getSelectedNodes();
, it throws an error.
var myArray = [{
title: "Title 1",
children: [{
title: "Title 1.1",
children: [{
title: "Title 1.1.1"
}]
}, {
title: "Title 1.2",
children: []
}]
},
{
title: "Title 2",
children: [{
title: "Title 2.1",
children: [{
title: "Title 2.1.1"
}]
}, {
title: "Title 2.2",
children: [{
title: "Title 2.2.1"
}]
}]
}
];
So I have an array that looks similar to this.
The titles are random but what I want to get is the level eg
{ title: 'Title 2.2 (or any othe random title)', level: '2.2', children:[...]}
I would like this to be recursive and a lodash solution would be highly appreciated.
Thanks.
You could use an iterative and recursive approach.
function addLevel(array, levels) {
levels = levels || [];
array.forEach(function (o, i) {
o.level = levels.concat(i + 1).join('.');
if (Array.isArray(o.children)) {
addLevel(o.children, levels.concat(i + 1));;
}
});
}
var myArray = [{ title: "Title 1", children: [{ title: "Title 1.1", children: [{ title: "Title 1.1.1" }] }, { title: "Title 1.2", children: [] }] }, { title: "Title 2", children: [{ title: "Title 2.1", children: [{ title: "Title 2.1.1" }] }, { title: "Title 2.2", children: [{ title: "Title 2.2.1" }] }] }];
addLevel(myArray);
console.log(myArray);
.as-console-wrapper { max-height: 100% !important; top: 0; }