Traverse Object and build Tree Lineage - javascript

Json Object :
var json = {
"Tree": [{
"Title": "Condition",
"Attr": {
"Id": 2258,
"Zone": null
},
"Children": [{
"Title": "General Wellness",
"Attr": {
"Id": 2315,
"Zone": null
},
"Children": [{
"Title": "Family Health",
"Attr": {
"Id": 2262,
"Zone": null
},
"Children": []
}, {
"Title": "Healthy Home",
"Attr": {
"Id": 2316,
"Zone": null
},
"Children": []
}, {
"Title": "Vitamins",
"Attr": {
"Id": 2317,
"Zone": null
},
"Children": []
}, {
"Title": "Recipes",
"Attr": {
"Id": 2318,
"Zone": null
},
"Children": []
}, {
"Title": "Caregiving",
"Attr": {
"Id": 2325,
"Zone": null
},
"Children": []
}, {
"Title": "Healthy Eating",
"Attr": {
"Id": 2346,
"Zone": null
},
"Children": []
}, {
"Title": "Travel Health",
"Attr": {
"Id": 2347,
"Zone": null
},
"Children": []
}]
}]
}]
}
I am able to traverse the tree however I am unable to build a tree structure for example if I wanted to look for "Recipes" it should return me the result as :
Condition > General Wellness > Recipes
UPDATE :
Traversing is done via :
function process(key,value) {
alert(key + " : "+value);
}
function traverse(o,func) {
for (var i in o) {
func.apply(this,[i,o[i]]);
if (o[i] !== null && typeof(o[i])=="object") {
traverse(o[i],func);
}
}
}
traverse(json,process);

I suggest an iterative, as you already had, approach with a defined exit if found and a repeated calling if not found. The path is created if the target is found.
Bonus: The getPath returns the success of the search.
function getPath(array, target, path) {
return array.some(function (a) {
if (a.Title === target) {
return path.unshift(a.Title);
} else if (Array.isArray(a.Children)) {
return getPath(a.Children, target, path) && path.unshift(a.Title);
}
});
}
var data = {
"Tree": [{
"Title": "Condition",
"Attr": {
"Id": 2258,
"Zone": null
},
"Children": [{
"Title": "General Wellness",
"Attr": {
"Id": 2315,
"Zone": null
},
"Children": [{
"Title": "Family Health",
"Attr": {
"Id": 2262,
"Zone": null
},
"Children": []
}, {
"Title": "Healthy Home",
"Attr": {
"Id": 2316,
"Zone": null
},
"Children": []
}, {
"Title": "Vitamins",
"Attr": {
"Id": 2317,
"Zone": null
},
"Children": []
}, {
"Title": "Recipes",
"Attr": {
"Id": 2318,
"Zone": null
},
"Children": []
}, {
"Title": "Caregiving",
"Attr": {
"Id": 2325,
"Zone": null
},
"Children": []
}, {
"Title": "Healthy Eating",
"Attr": {
"Id": 2346,
"Zone": null
},
"Children": []
}, {
"Title": "Travel Health",
"Attr": {
"Id": 2347,
"Zone": null
},
"Children": []
}]
}]
}, {
Title: 'abc',
Children: [{
Title: 'def',
Children: [{
Title: 'ghi'
}]
}, {
Title: 'jkl',
Children: [{
Title: 'mno'
}]
}]
}]
},
path = [];
document.write(getPath(data.Tree, 'Recipes', path) + ': ' + path.join(' > ') + '<br>');
path = [];
document.write(getPath(data.Tree, 'ghi', path) + ': ' + path.join(' > ') + '<br>');
path = [];
document.write(getPath(data.Tree, 'nonsense', path) + ': ' + path.join(' > ') + '<br>');

Related

Extract the parent node name from Tree who has childrens

I want to iterate the tree and need to get the id of all the nodes which has the children in string array. while looping it is just returning me the record but doesn't extract the name of the node.
e.g const result = ['root', 'USER', 'ROLE', 'DASHBOARD', 'BRAND', 'COMPANY'];
{
"id": "root",
"name": "Roles and Permissions",
"children": [
{
"id": "USER",
"name": "USER",
"children": [
{
"id": "1",
"name": "VIEW"
},
{
"id": "2",
"name": "CREATE"
},
{
"id": "3",
"name": "EDIT"
}
]
},
{
"id": "ROLE",
"name": "ROLE",
"children": [
{
"id": "8",
"name": "VIEW"
},
{
"id": "9",
"name": "CREATE"
},
{
"id": "10",
"name": "EDIT"
},
{
"id": "11",
"name": "DELETE"
}
]
},
{
"id": "DASHBOARD",
"name": "DASHBOARD",
"children": [
{
"id": "BRAND",
"name": "BRAND",
"children": [
{
"id": "52",
"name": "VIEW"
},
{
"id": "53",
"name": "CREATE"
},
{
"id": "54",
"name": "EDIT"
},
{
"id": "55",
"name": "DELETE"
}
]
},
{
"id": "COMPANY",
"name": "COMPANY",
"children": [
{
"id": "56",
"name": "VIEW"
},
{
"id": "57",
"name": "CREATE"
},
{
"id": "58",
"name": "EDIT"
},
{
"id": "59",
"name": "DELETE"
}
]
}
]
}
]
}
I tried various looping method to get the list, e.g. but not returning the exact name of the node.
function getParent(nodes) {
if(Array.isArray(nodes.children)) {
return nodes.children.map((node) => getParent(node));
}
return nodes.name;
}
You can store the resp in an array and return that array.
const q = {
"id": "root",
"name": "Roles and Permissions",
"children": [
{
"id": "USER",
"name": "USER",
"children": [
{
"id": "1",
"name": "VIEW"
},
{
"id": "2",
"name": "CREATE"
},
{
"id": "3",
"name": "EDIT"
}
]
},
{
"id": "ROLE",
"name": "ROLE",
"children": [
{
"id": "8",
"name": "VIEW"
},
{
"id": "9",
"name": "CREATE"
},
{
"id": "10",
"name": "EDIT"
},
{
"id": "11",
"name": "DELETE"
}
]
},
{
"id": "DASHBOARD",
"name": "DASHBOARD",
"children": [
{
"id": "BRAND",
"name": "BRAND",
"children": [
{
"id": "52",
"name": "VIEW"
},
{
"id": "53",
"name": "CREATE"
},
{
"id": "54",
"name": "EDIT"
},
{
"id": "55",
"name": "DELETE"
}
]
},
{
"id": "COMPANY",
"name": "COMPANY",
"children": [
{
"id": "56",
"name": "VIEW"
},
{
"id": "57",
"name": "CREATE"
},
{
"id": "58",
"name": "EDIT"
},
{
"id": "59",
"name": "DELETE"
}
]
}
]
}
]
}
let result = []
function r(nodes){
if(Array.isArray(nodes.children)){
result.push(nodes.name);
nodes.children.map((c) => r(c))
return result;
}
return result;
}
console.log(r(q))
You can simply use a recursive function. Here ids is an array. You can initialize it before calling the function. Call this function in your getting IDs method.
const getIdFromNodesWithChild = (node) => {
if (node.children != undefined){
ids.push(node.id)
const children_list = node.children
children_list.forEach( new_child => getIdFromNodesWithChild(new_child))
}}
caller function
const returnIds = (tree) => {
ids = []
getIdFromNodesWithChild(tree)
return (ids)
}
result : ['root', 'USER', 'ROLE', 'DASHBOARD', 'BRAND', 'COMPANY']

angular 3 nested object

Can someone help me regarding my code I already search but had no luck on logic.
i am trying to get a nested drop but i get the same result on 3-child hierarchy.
this is the data from my API.
{
"data": [
{
"id": "1",
"name": "Metro Manila",
"parent": null
},
{
"id": "101",
"name": "Manila",
"parent": "1"
},
{
"id": "10101",
"name": "Malate",
"parent": "101"
},
{
"id": "10102",
"name": "Ermita",
"parent": "101"
},
{
"id": "10103",
"name": "Binondo",
"parent": "101"
},
{
"id": "102",
"name": "Makati",
"parent": "1"
},
{
"id": "10201",
"name": "Poblacion",
"parent": "102"
},
{
"id": "10202",
"name": "Bel-Air",
"parent": "102"
},
{
"id": "10203",
"name": "San Lorenzo",
"parent": "102"
},
{
"id": "10204",
"name": "Urdaneta",
"parent": "102"
},
{
"id": "103",
"name": "Marikina",
"parent": "1"
},
{
"id": "10301",
"name": "Sto Nino",
"parent": "103"
},
{
"id": "10302",
"name": "Malanday",
"parent": "103"
},
{
"id": "10303",
"name": "Concepcion I",
"parent": "103"
},
{
"id": "2",
"name": "CALABARZON",
"parent": null
},
{
"id": "201",
"name": "Laguna",
"parent": "2"
},
{
"id": "20101",
"name": "Calamba",
"parent": "201"
},
{
"id": "20102",
"name": "Sta. Rosa",
"parent": "201"
},
{
"id": "202",
"name": "Cavite",
"parent": "2"
},
{
"id": "20201",
"name": "Kawit",
"parent": "202"
},
{
"id": "203",
"name": "Batangas",
"parent": "2"
},
{
"id": "20301",
"name": "Lipa",
"parent": "203"
},
{
"id": "20302",
"name": "Tanauan",
"parent": "203"
},
{
"id": "3",
"name": "Central Luzon",
"parent": null
},
{
"id": "301",
"name": "Bulacan",
"parent": "3"
},
{
"id": "302",
"name": "Nueva Ecija",
"parent": "3"
},
{
"id": "303",
"name": "Tarlac",
"parent": "3"
},
{
"id": "304",
"name": "Pampanga",
"parent": "3"
}
]
}
this.data = result.body.data;
let parents = this.data.filter(x => x.parent == null);
let child_id = [];
let child_id2 = [];
for (let i = 0; i < parents.length; i++) {
let _myTreelist = new ParentData();
_myTreelist.data.parent = parents[i].name;
child_id = this.data.filter(x => x.parent == parents[i].id); //get child-1 with id
_myTreelist.data.child.child1 = child_id.map((item) => {
return item.name
})
for (let e = 0; e < child_id.length; e++) { //10 ids
child_id2 = this.data.filter(a => a.parent === child_id[e].id); //get child-2 with id
_myTreelist.data.child.child.child2 = child_id2.map((item) => {
return item.name
})
}
this.parentList.push(_myTreelist);
}
this is the image output I get.
it works the first and 2nd nested but in the 3rd it display same
make a recursive function
getChild(element:any,data:any[])
{
element.children=data.filter((x:any)=>x.parent==element.id)
if (element.children.length)
element.children.forEach((x:any)=>this.getChild(x,data))
else
element.children=null;
return element
}
then
treeData=this.data.filter(x=>!x.parent)
.map(x=>this.getChild(x,this.data))
stackblitz
If you use an API and an observable use pipe map
treeData$=this.service.getData().pipe(
map((data:any[])=>{
return data.filter(x=>!x.parent).map(x=>this.getChild(x,data))
})
)

How to find the farthest object in a sub array of a array with empty objects?

I've got a array of object in which the children got arrays as well:
[{
"id": 0,
"name": "Primary",
"xPoints": [{
"id": 0,
"name": "Untitledtest12",
"type": "custom",
"description": ""
}, {
"id": 1,
"name": "asd",
"description": "",
"type": "custom"
}, {
"id": 2,
"name": "asd",
"description": "",
"type": "custom"
}, {
"id": 3,
"name": "asd123",
"description": "",
"type": "custom"
}, {
"id": 4,
"name": "a",
"description": "a",
"type": "custom"
}]
}, {
"id": 1,
"name": "Untitled X Line",
"xPoints": [
{},
{},
{},
{},
{},
{
"id": 0,
"name": "this is the farthest",
"type": "custom",
"description": ""
},
{}
]
}]
what I'm looking for is a way to get the "farthest" of object index on these childrens of the main array
Expected result:
index: 6 from second's "Untitled X Line"
You can use recursion to get the depth of the object.
const obj = [{
"id": 0,
"name": "Primary",
"xPoints": [{
"id": 0,
"name": "Untitledtest12",
"type": "custom",
"description": ""
}, {
"id": 1,
"name": "asd",
"description": "",
"type": "custom"
}, {
"id": 2,
"name": "asd",
"description": "",
"type": "custom"
}, {
"id": 3,
"name": "asd123",
"description": "",
"type": "custom"
}, {
"id": 4,
"name": "a",
"description": "a",
"type": "custom"
}]
}, {
"id": 1,
"name": "Untitled X Line",
"xPoints": [
{},
{},
{},
{},
{},
{
"id": 0,
"name": "this is the farthest",
"type": "custom",
"description": ""
},
{}
]
}]
function depthOf(object) {
var level = 1;
for(var key in object) {
if (!object.hasOwnProperty(key)) continue;
if(typeof object[key] == 'object'){
var depth = depthOf(object[key]) + 1;
level = Math.max(depth, level);
}
}
return level;
}
var maxLevels = 0;
var maxObj;
obj.forEach(e => maxLevels < depthOf(e) ? maxObj = e : '');
console.log(maxObj);

Search nested object and return whole path

I have below JavaScript with n level children and want to search for id and if any of item from has matching id than need to return object from root to matching item.
I want to return entire hierarchy of found item from root till object with it's children.
I tried with lodash and underscore and could not find easy solution.
input: {
"children": [{
"name": "Home",
"title": "Home",
"id": "home1",
"children": []
},
{
"name": "BUSINESS AND ROLE SPECIFIC",
"title": "BUSINESS AND ROLE SPECIFIC",
"id": "BAR1",
"children": [{
"name": "Global Businesses",
"title": "Global Businesses",
"id": "GB1",
"children": [{
"name": "Commercial Banking",
"title": "Commercial Banking",
"id": "CB1",
"children": [{
"name": "FLAGSHIP PROGRAMMES",
"title": "FLAGSHIP PROGRAMMES",
"id": "FG1",
"children": []
}]
}]
}]
},
{
"name": "RISK MANAGEMENT",
"title": "RISK MANAGEMENT",
"id": "RM1",
"children": []
}
]
}
Search: {
id: 'FG1'
}
return :{
"name": "BUSINESS AND ROLE SPECIFIC",
"title": "BUSINESS AND ROLE SPECIFIC",
"id": "BAR1",
"children": [{
"name": "Global Businesses",
"title": "Global Businesses",
"id": "GB1",
"children": [{
"name": "Commercial Banking",
"title": "Commercial Banking",
"id": "CB1",
"children": [{
"name": "FLAGSHIP PROGRAMMES",
"title": "FLAGSHIP PROGRAMMES",
"id": "FG1",
"children": [{}]
}]
}]
}]
}
You could use this function:
function findChild(obj, condition) {
if (Object.entries(condition).every( ([k,v]) => obj[k] === v )) {
return obj;
}
for (const child of obj.children || []) {
const found = findChild(child, condition);
// If found, then add this node to the ancestors of the result
if (found) return Object.assign({}, obj, { children: [found] });
}
}
// Sample data
var input = { "children": [{ "name": "Home", "title": "Home", "id": "home1", "children": [] }, { "name": "BUSINESS AND ROLE SPECIFIC", "title": "BUSINESS AND ROLE SPECIFIC", "id": "BAR1", "children": [{ "name": "Global Businesses", "title": "Global Businesses", "id": "GB1", "children": [{ "name": "Commercial Banking", "title": "Commercial Banking", "id": "CB1", "children": [{ "name": "FLAGSHIP PROGRAMMES", "title": "FLAGSHIP PROGRAMMES", "id": "FG1", "children": [] }] }] }] }, { "name": "RISK MANAGEMENT", "title": "RISK MANAGEMENT", "id": "RM1", "children": [] } ]},
search = { id: 'FG1' };
console.log(findChild(input, search));
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can use this also for searching with multiple conditions, which must be true at the same time:
search = { "name": "Global Businesses", "title": "Global Businesses" };
... would give you the object that has the specified name and title.
Follow-up question
You asked in comments:
Is there way to supply number to not remove children for given node in input. like,
const donotRemoveChildNode = 2;
console.log(findChild(input, search, donotRemoveChildNode ));
...so it will not remove that specific node's children if it matches condition?
Here, if we search for { id: 'FG1'} and supply donotRemoveChildNode = 2, it would not remove the first level children for "Commercial banking".
I would say the donotRemoveChildNode would have to be 3, as there are three levels of children arrays in the ancestor-hierarchy of the "Commercial banking" node. A value of 0 would show the first level children of the top-most children property.
Here is how that extra argument would work -- I added some records to the data to illustrate the difference in the output:
function findChild(obj, condition, removeChildNodesBefore = Infinity) {
if (Object.entries(condition).every( ([k,v]) => obj[k] === v )) {
return obj;
}
for (const child of obj.children || []) {
let found = findChild(child, condition, removeChildNodesBefore - 1);
if (found) {
return Object.assign({}, obj, {
children: removeChildNodesBefore <= 0
? obj.children.map( sibling =>
sibling == child ? found
: Object.assign({}, sibling, {children: []})
)
: [found]
});
}
}
}
var input = { "children": [{ "name": "Home", "title": "Home", "id": "home1", "children": [] }, { "name": "BUSINESS AND ROLE SPECIFIC", "title": "BUSINESS AND ROLE SPECIFIC", "id": "BAR1", "children": [{ "name": "Global Businesses", "title": "Global Businesses", "id": "GB1", "children": [{ "name": "test", "title": "test", "id": "xxx", "children": [{ "name": "testDeep", "title": "test", "id": "deep", "children": []}]}, { "name": "Commercial Banking", "title": "Commercial Banking", "id": "CB1", "children": [{ "name": "test", "title": "test", "id": "yyy", "children": []}, { "name": "FLAGSHIP PROGRAMMES", "title": "FLAGSHIP PROGRAMMES", "id": "FG1", "children": [] }] }] }] }, { "name": "RISK MANAGEMENT", "title": "RISK MANAGEMENT", "id": "RM1", "children": [] } ]},
search = { id: 'FG1' }
console.log(findChild(input, search, 3));
.as-console-wrapper { max-height: 100% !important; top: 0; }
function getBranch(branches, leaf_id)
{
var result_branch = null;
branches.some(function(branch, idx) {
if (branch.id == leaf_id) {
result_branch = Object.assign({}, branch);
result_branch.children.forEach(function(child, idx) {
delete result_branch.children[idx].children;
});
return true;
} else {
let target_branch = getBranch(branch.children, leaf_id);
if (target_branch) {
result_branch = Object.assign({}, branch);
delete result_branch.children
result_branch.children = [target_branch];
return true;
}
}
return false;
});
return result_branch;
}
console.log(getBranch(input.children, 'GB1'));
One way is to first loop the root children, and then create another function to see if the Id exists in any of it's children.
var data = {
"children": [{
"name": "Home",
"title": "Home",
"id": "home1",
"children": []
},
{
"name": "BUSINESS AND ROLE SPECIFIC",
"title": "BUSINESS AND ROLE SPECIFIC",
"id": "BAR1",
"children": [{
"name": "Global Businesses",
"title": "Global Businesses",
"id": "GB1",
"children": [{
"name": "Commercial Banking",
"title": "Commercial Banking",
"id": "CB1",
"children": [{
"name": "FLAGSHIP PROGRAMMES",
"title": "FLAGSHIP PROGRAMMES",
"id": "FG1",
"children": []
}]
}]
}]
},
{
"name": "RISK MANAGEMENT",
"title": "RISK MANAGEMENT",
"id": "RM1",
"children": []
}
]
};
function hasId( id, data ) {
if (data.id === id) return true;
if (data.children) {
for (const child of data.children) {
if (hasId( id, child)) return true;
}
}
return false;
}
function search( id, data ) {
for (const child of data.children) {
if (hasId(id, child)) return child;
}
return null;
}
console.log(search( "FG1", data ));

looping through JSON object with multiple childrens using java script

I am trying to loop through a Json object which would look like this
[
{
"yang_type": "container",
"name": "c1",
"value": "",
"children": [
{
"yang_type": "",
"name": "type",
"value": "Uint32",
"children": []
},
{
"yang_type": "list",
"name": "DNS",
"value": "",
"children": [
{
"name": "type",
"value": "String",
"children": [],
"yang_type": ""
},
{
"yang_type": "leaf",
"name": "ip-address",
"value": "",
"children": [
{
"name": "type",
"value": "string",
"children": [],
"yang_type": ""
}
]
},
{
"yang_type": "leaf",
"name": "Domain",
"value": "",
"children": [
{
"name": "type",
"value": "string",
"children": [],
"yang_type": ""
}
]
}
]
}
]
}
]
I am trying this logic but it doesnt loop through first childs child.
while(m.children.length >= 1) {
if(m.yang_type!='' && m.name!=''){
{$log.error("parent:",m.yang_type,m.name);}
}
if(m.name!='' && m.value!=''){
{$log.error("child:",m.name,m.value);}
}
m = m.children[m.children.length - 1];
}
The above code doesn't loop through all the children. what i am doing wrong ?
You try to loop over the array. Your attempt does not work this way.
You could use a callback for iterating and a take it for the recursive call for childrens.
function loop(a) {
console.log(a.name); // process you data
Array.isArray(a.children) && a.children.forEach(loop); // check and iterate children
}
var data = [{ "yang_type": "container", "name": "c1", "value": "", "children": [{ "yang_type": "", "name": "type", "value": "Uint32", "children": [] }, { "yang_type": "list", "name": "DNS", "value": "", "children": [{ "name": "type", "value": "String", "children": [], "yang_type": "" }, { "yang_type": "leaf", "name": "ip-address", "value": "", "children": [{ "name": "type", "value": "string", "children": [], "yang_type": "" }] }, { "yang_type": "leaf", "name": "Domain", "value": "", "children": [{ "name": "type", "value": "string", "children": [], "yang_type": "" }] }] }] }];
data.forEach(loop);
Edit with indented output.
function loop(level) {
return function (a) {
var i = level, s = '';
while (i--) {
s += ' ';
}
if (level) {
s += '*';
}
a.yang_type ?
console.log(s + a.yang_type + ' ' + a.name) :
console.log(s + a.name + ' ' + a.value);
Array.isArray(a.children) && a.children.forEach(loop(level + 1));
}
}
var data = [{ "yang_type": "container", "name": "c1", "value": "", "children": [{ "yang_type": "", "name": "type", "value": "Uint32", "children": [] }, { "yang_type": "list", "name": "DNS", "value": "", "children": [{ "name": "type", "value": "String", "children": [], "yang_type": "" }, { "yang_type": "leaf", "name": "ip-address", "value": "", "children": [{ "name": "type", "value": "string", "children": [], "yang_type": "" }] }, { "yang_type": "leaf", "name": "Domain", "value": "", "children": [{ "name": "type", "value": "string", "children": [], "yang_type": "" }] }] }] }];
data.forEach(loop(0));

Categories

Resources