How to get the total depth of an unknown JSON hierarchy? - javascript

I've been struggling to find/build a recursive function to parse this JSON file and get the total depth of its children.
The file looks something like this:
var input = {
"name": "positive",
"children": [{
"name": "product service",
"children": [{
"name": "price",
"children": [{
"name": "cost",
"size": 8
}]
}, {
"name": "quality",
"children": [{
"name": "messaging",
"size": 4
}]
}]
}, {
"name": "customer service",
"children": [{
"name": "Personnel",
"children": [{
"name": "CEO",
"size": 7
}]
}]
}, {
"name": "product",
"children": [{
"name": "Apple",
"children": [{
"name": "iPhone 4",
"size": 10
}]
}]
}]
}


You can use a recursive function to go through the whole tree:
getDepth = function (obj) {
var depth = 0;
if (obj.children) {
obj.children.forEach(function (d) {
var tmpDepth = getDepth(d)
if (tmpDepth > depth) {
depth = tmpDepth
}
})
}
return 1 + depth
}
The function works as follow:
If the object is not a leaf (i.e the object has the children attribute), then:
Compute the depth of each child, save the maximal one
return 1 + the depth of the deepest child
Otherwise, return 1
jsFiddle: http://jsfiddle.net/chrisJamesC/hFTN8/
EDIT
With modern JavaScript, the function could look like this:
const getDepth = ({ children }) => 1 +
(children ? Math.max(...children.map(getDepth)) : 0)
jsFiddle: http://jsfiddle.net/chrisJamesC/hFTN8/59/


This will count the number of "leaves" in a tree:
var treeCount = function (branch) {
if (!branch.children) {
return 1;
}
return branch.children.reduce(function (c, b) {
return c + treeCount(b);
}, 0)
}
And an alternative way to get depth:
var depthCount = function (branch) {
if (!branch.children) {
return 1;
}
return 1 + d3.max(branch.children.map(depthCount));
}

Related

How to find the parent JSON object vaue using the child object value dynamically in Javascript?

var obj = [
{
"name": "A1",
"children": [
{
"name": "A1-level1-child1",
"children": [
{
"name": "A1-level2-child1",
"children": [
{
"name": "A1-level3-child1",
"children": []
},
{
"name": "A1-level3-child2",
"children": []
}
]
}
]
},
{
"name": "A2-level1-child1",
"children": []
}
]
},
{
"name": "B1",
"children": [
]
}
];
From the above JSON object, if i check the value "A1-level3-child1", the function should give me its parent name as "A1-level2-child1". Same way, if i check for "A2-level1-child1",then it should be give me the parent value as "A1".

You could iterate the array or children and use a short circuit if the node is found.
function getParentName(array, name, parent = 'root') {
var result;
array.some(o => result = o.name === name && parent
|| o.children && getParentName(o.children, name, o.name));
return result;
}
var array = [{ name: "A1", children: [{ name: "A1-level1-child1", children: [{ name: "A1-level2-child1", children: [{ name: "A1-level3-child1", children: [] }, { name: "A1-level3-child2", children: [] }] }] }, { name: "A2-level1-child1", children: [] }] }, { name: "B1", children: [] }];
console.log(getParentName(array, "A1-level3-child1")); // A1-level2-child1
console.log(getParentName(array, "A2-level1-child1")); // A1

GoGo this code.
var parentMap = {}
function getParentMap(arr, parent) {
if (!(arr instanceof Array)) {
return;
}
for (o of arr) {
parentMap[o.name] = parent;
if (o.children && o.children.length) {
getParentMap(o.children, o);
//getParentMap(o.children, o.name);
}
}
}
var arr = [{
"name": "A1",
"children": [{
"name": "A1-level1-child1",
"children": [{
"name": "A1-level2-child1",
"children": [{
"name": "A1-level3-child1",
"children": []
},
{
"name": "A1-level3-child2",
"children": []
}
]
}]
},
{
"name": "A2-level1-child1",
"children": []
}
]
},
{
"name": "B1",
"children": []
}];
getParentMap(obj, null);
parentMap["A1-level3-child1"].name

If you can redefine this structure, you can add 'parent' on every node, so more easy to operate it.

node js create an object in specific pattern from array of object

I'm facing some issue in for loop while creating an object from array of object.I have an array as this in node js app:
[
{
"Material": "113/133",
"Name": [
{
"name": "WELD1",
"value": 27520
},
{
"name": "WELD2",
"value": 676992
},
{
"name": "WELD3",
"value": 421
}
]
},
{
"Material": "150/300",
"Name": [
{
"name": "WELD1",
"value": 1441
},
{
"name": "WELD2",
"value": 555
},
{
"name": "WELD3",
"value": 100992
}
]
}
]
I want to return object like this which contains all the Material as array, Name and there value in array of object like this:
{
Material: ["113/133", "150/300"],
datasets: [
{
label: "WELD1",
data: [27520,1441]
},
{
label: "WELD2",
data: [676992,555]
},
{
label: "WELD3",
data: [100,20,0]
}
]
}
I want to get result using for loop.

you can use .reduce() and do something like this:
var arr = [
{
"Material": "113/133",
"Name": [
{
"name": "WELD1",
"value": 27520
},
{
"name": "WELD2",
"value": 676992
},
{
"name": "WELD3",
"value": 421
}
]
},
{
"Material": "150/300",
"Name": [
{
"name": "WELD1",
"value": 1441
},
{
"name": "WELD2",
"value": 555
},
{
"name": "WELD3",
"value": 100992
}
]
}
];
var newArr = arr.reduce((acc, ob) => {
for (var key in ob)
if(typeof acc[key] === 'object')
acc[key] = acc[key] ? acc[key].concat(ob[key]) : [ob[key]];
else
acc[key] ? acc[key].push(ob[key]) : acc[key] = [ob[key]];
return acc;
}, {});
console.log(newArr);

let array = [
{
"Material": "113/133",
"Name": [
{
"name": "WELD1",
"value": 27520
},
{
"name": "WELD2",
"value": 676992
},
{
"name": "WELD3",
"value": 421
}
]
},
{
"Material": "150/300",
"Name": [
{
"name": "WELD1",
"value": 1441
},
{
"name": "WELD2",
"value": 555
},
{
"name": "WELD3",
"value": 100992
}
]
}
]
let answer = {Material: [], datasets: []}
array.forEach(x => {
answer.Material.push(x.Material);
x.Name.forEach(na => {
let object = answer.datasets.find(obj => obj.label === na.name) || {label: "", data: []};
if(object.label === ""){
object.label = na.name;
object.data.push(na.value);
answer.datasets.push(object);
}else{
object.data.push(na.value)
}
});
});
console.log(answer);
The above is alternative solution using forEach instead of reduce

Use of Array.reduce to build your new data structure using data you have
const start = [{
"Material": "113/133",
"Name": [{
"name": "WELD1",
"value": 27520
},
{
"name": "WELD2",
"value": 676992
},
{
"name": "WELD3",
"value": 421
}
]
},
{
"Material": "150/300",
"Name": [{
"name": "WELD1",
"value": 1441
},
{
"name": "WELD2",
"value": 555
},
{
"name": "WELD3",
"value": 100992
}
]
}
];
const end = start.reduce((tmp, {
Material,
Name,
}) => {
// Handle the material
// If it do not exist in the array, push it
if (!tmp.Material.includes(Material)) {
tmp.Material.push(Material);
}
// Handle the datasets
// Look at each Name
Name.forEach(({
name,
value,
}) => {
// Can we find the label?
const labelFind = tmp.datasets.find(y => y.label === name);
// If we can't find the label, create a new dataset
if (!labelFind) {
tmp.datasets.push({
label: name,
data: [
value,
],
});
return;
}
// If we has found it push new value in the dataset
labelFind.data.push(value);
});
return tmp;
}, {
Material: [],
datasets: [],
});
console.log(end);

// This is the old fashioned way.
// Iterate over whole array,
// make a map, push value where 'name' is found in map
// later iterate over this map - dataMap - and form required datasets array.
var Material = [];
var dataMap = {};
arr.forEach(obj => {
Material.push(obj.Material);
obj.Name.forEach(item => {
if(dataMap[item.name]){
dataMap[item.name].push(item.value);
}
else {
dataMap[item.name] = [item.value];
}
});
});
var datasets = [];
Object.keys(dataMap).forEach(label => {
datasets.push({
label: label,
data: dataMap[label]
});
});
var result = {
Material: Material,
datasets: datasets
}
console.log(result);

How to store object at a certain level in the JSON data by dynamically iterating through it? [duplicate]

This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 5 years ago.
I have the following json:
{
"menu": [{
"name": "vegetation",
"id": "1",
"children": [
{
"name": "landuse",
"id": "1.1",
"children": [
{
"name": "forest area",
"id": "1.1.1",
"children": null
},
{
"name": "plantation",
"id": "1.1.2",
"children": null
}
]
}
]
}]
}
I want to dynamically access the objects whose value of "children" is null and store the "name" of these objects in a variable. For example in this case either forest area or plantation. How can I do this using javascript or jquery?

You don't need jQuery for this, a simple for will do and, most likely, it's faster than anything else:
var childless = [],
checkForChildren = function(items){
for (var i = 0; i < items.length; i++) {
if (items[i].children)
checkForChildren(items[i].children);
else
childless.push(items[i]);
}
};
// test it:
var menu = [{
"name": "vegetation",
"id": "1",
"children": [{
"name": "landuse",
"id": "1.1",
"children": [{
"name": "forest area",
"id": "1.1.1",
"children": null
},{
"name": "plantation",
"id": "1.1.2",
"children": null
}]
}]
}];
checkForChildren(menu);
console.log(childless);

Recursion comes to mind.
var childless = [];
var recursive_function = function(obj){
if(obj.children == null){
childless.push(obj);
} else {
$.each(obj.children, function(child){
recursive_function(child);
}
}
};
$.each(json_obj.menu, function(root_level){
recursive_function(root_level);
});
console.log(childless);
console.log($.map(childless, function(x){return x.name;}));

var test = {
"menu": [{
"name": "vegetation",
"id": "1",
"children": [{
"name": "landuse",
"id": "1.1",
"children": [{
"name": "forest area",
"id": "1.1.1",
"children": null
},
{
"name": "plantation",
"id": "1.1.2",
"children": null
}
]
}]
}]
};
var hasNullChildren = [];
function checkChildren ( children ) {
//loop over all children
children.forEach(function(child){
//if no children, add name to list
if (!child.children) hasNullChildren.push(child.name);
//check nested children
else checkChildren(child.children);
});
}
//start the recursion loop
checkChildren(test.menu);
console.log(hasNullChildren);

Recursively iterating through the array and searching for the children = null, gives the array with all the names of objects.
const obj = {
"menu": [{
"name": "vegetation",
"id": "1",
"children": [
{
"name": "landuse",
"id": "1.1",
"children": [
{
"name": "forest area",
"id": "1.1.1",
"children": null
},
{
"name": "plantation",
"id": "1.1.2",
"children": null
}
]
},{
"name": "landuse",
"id": "1.1",
"children": null
}
]
}]
}
function getNameWithNullChildren(arr) {
let array = [];
arr.forEach(item => {
if(item.children === null) {
array.push(item.name);
} else {
array = getNameWithNullChildren(item.children);
}
});
return array;
}
console.log(getNameWithNullChildren(obj.menu));

Javascript deriving a Tree from a set of URLs

Guys am trying to create a dynamic menu list. There is no limit to the depth of elements that can be created by a user.
MY PROBLEM
My set of URL looks like this
var json_data = [
{
"title" : "Food",
"path" : "/root",
},
{
"title" : "Cloths",
"path" : "/root",
},
{
"title" : "Veg",
"path" : "/root/Food",
},
{
"title" : "Brinjal",
"path" : "/root/Food/Veg",
},
{
"title" : "T shirt",
"path" : "/root/Cloths",
},
{
"title" : "Shirt",
"path" : "/root/Cloths",
},
{
"title" : "Green brinjal",
"path" : "/root/Food/Veg/Brinjal",
}
];
I want the titles to be in a hierarchy format which I eventually will render in form of ul > li to create the menu - in front-end.
The Hierarchy should be something like this:
[
{
"title": "Food",
"path": "/root",
"children": [
{
"title": "Veg",
"path": "/root/Food",
"children": [
{
"title": "Brinjal",
"path": "/root/Food/Veg",
"children": [
{
"title": "Green brinjal",
"path": "/root/Food/Veg/Brinjal",
"children": []
}
]
}
]
}
]
},
{
"title": "Cloths",
"path": "/root",
"children": [
{
"title": "T shirt",
"path": "/root/Cloths",
"children": []
},
{
"title": "Shirt",
"path": "/root/Cloths",
"children": []
}
]
}
]
WHAT I TRIED
// Add an item node in the tree, at the right position
function addToTree( node, treeNodes ) {
// Check if the item node should inserted in a subnode
for ( var i=0; i<treeNodes.length; i++ ) {
var treeNode = treeNodes[i];
// "/store/travel".indexOf( '/store/' )
if ( node.path.indexOf( treeNode.path + '/' ) == 0 ) {
addToTree( node, treeNode.children );
// Item node was added, we can quit
return;
}
}
// Item node was not added to a subnode, so it's a sibling of these treeNodes
treeNodes.push({
title: node.title,
path: node.path,
children: []
});
}
//Create the item tree starting from menuItems
function createTree( nodes ){
var tree = [];
for ( var i=0; i<nodes.length; i++ ) {
var node = nodes[i];
addToTree( node, tree );
}
return tree;
}
// variable = "json_data" is the set of URLS
var menuItemsTree = createTree( json_data );
console.log(menuItemsTree)
And the result it yields is this:
[
{
"title": "Food",
"path": "/root",
"children": [
{
"title": "Veg",
"path": "/root/Food",
"children": [
{
"title": "Brinjal",
"path": "/root/Food/Veg",
"children": [
{
"title": "Green brinjal",
"path": "/root/Food/Veg/Brinjal",
"children": []
}
]
}
]
},
{
"title": "T shirt",
"path": "/root/Cloths",
"children": []
},
{
"title": "Shirt",
"path": "/root/Cloths",
"children": []
}
]
},
{
"title": "Cloths",
"path": "/root",
"children": []
}
]
The elements "T Shirt" and "Shirt" is pushed inside the Food's children:[] which those should be inside Cloth's children:[]
The solution I have used is taken from Here
I trying to derive an algorithm myself- but its not clicked exactly right yet. Please help if any one already has a solution. In case if I can derive a solution myself, I will share it here.
above code is
Thanks

Below is the logic. here is a Working Fiddle
var json_data = [{
"title": "Food",
"path": "/root",
}, {
"title": "Cloths",
"path": "/root",
}, {
"title": "Veg",
"path": "/root/Food",
}, {
"title": "Brinjal",
"path": "/root/Food/Veg",
}, {
"title": "T shirt",
"path": "/root/Cloths",
}, {
"title": "Shirt",
"path": "/root/Cloths",
}, {
"title": "Green brinjal",
"path": "/root/Food/Veg/Brinjal",
},{
"title": "Test cloth",
"path": "/root/Cloths/Shirt",
}];
// Add an item node in the tree, at the right position
function addToTree(node, treeNodes) {
var parentNode = GetTheParentNodeChildArray(node.path, treeNodes) || treeNodes;
parentNode.push({
title: node.title,
path: node.path,
children: []
});
}
function GetTheParentNodeChildArray(path, treeNodes) {
for (var i = 0; i < treeNodes.length; i++) {
var treeNode = treeNodes[i];
if (path === (treeNode.path + '/' + treeNode.title)) {
return treeNode.children;
}
else if (treeNode.children.length > 0) {
var possibleParent = false;
treeNode.children.forEach(function(item) {
if (path.indexOf(item.path + '/' + item.title) == 0) {
possibleParent = true;
return false;
}
});
if (possibleParent) {
return GetTheParentNodeChildArray(path, treeNode.children)
}
}
}
}
//Create the item tree starting from menuItems
function createTree(nodes) {
var tree = [];
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
addToTree(node, tree);
}
return tree;
}
// variable = "json_data" is the set of URLS
var menuItemsTree = createTree(json_data);
console.log(menuItemsTree);
Limitation of this logic: This logic works if the parent node is parsed before the child nodes, hence it is recommended to sort the list of
URLs ( i.e. json_data[] ) likewise. Here's a snippet of Sorting-before + tree-structuring-the-sorted
Hope this is helpful

Getting Specific data from Nested Json which is having multiple Parent Children

Am trying to filter out some specific data's from Nested JSON which is having multiple Parent Children . Here is my json ,
[{
"id": "111111",
"name": "Parent",
"steps": [{
"id": "22222",
"name": "Child",
"steps": [{
"id": "333333",
"name": "Child -Child",
"steps": [{
"id": "444444",
"name": "Child - Child - Child",
"steps": [{
"id": "5555",
"name": "Child - Child - Child - Child"
}, {
"id": "522e9327-0747-4080-b6e2-d57e726b5b26",
"name": "Child - Child - Child - Child 2"
}],
}],
}],
}],
}]
What am trying to do here is i have to get some specific data's which are inside this nested json . For Ex : i need output like ["parent","Child","Child-Child"...etc ] . So i used map function using java script but the output was different like this one ["ParentChildChildChild"] (With No spaces) .If output's are String only mean's i can put "\n" and separate them but sometimes they are in Numbers so problem will occur's . Here is my Code which i tried ,
var myReturnedValues = mainSteps.map(x => [
x.steps.map(y => y.name +
y.steps.map(z => z.name +
z.steps.map(a => a.name + a.steps.map(b => b.name))
)
)
]);
Can someone help/clarify Me .

To achieve this most effectively you need To achieve this most effectively you need To achieve this most effectively you need to use recursion use recursion use recursion.
Using this pattern means that the array will always be filled no matter how many levels of nested object you have. Try this:
var data = [{
"id": "111111",
"name": "Parent",
"steps": [{
"id": "22222",
"name": "Child",
"steps": [{
"id": "333333",
"name": "Child -Child",
"steps": [{
"id": "444444",
"name": "Child - Child - Child",
"steps": [{
"id": "5555",
"name": "Child - Child - Child - Child"
}, {
"id": "522e9327-0747-4080-b6e2-d57e726b5b26",
"name": "Child - Child - Child - Child 2"
}],
}],
}],
}],
}]
var names = [];
function getNames(arr) {
for (var i = 0; i < arr.length; i++) {
names.push(arr[i].name);
if (arr[i].steps && arr[i].steps.length)
getNames(arr[i].steps);
}
}
getNames(data);
console.log(names);

You can achieve this using the javascript map function & recursion
var jsonArray = [{
"id": "111111",
"name": "Parent",
"steps": [{
"id": "22222",
"name": "Child",
"steps": [{
"id": "333333",
"name": "Child -Child",
"steps": [{
"id": "444444",
"name": "Child - Child - Child",
"steps": [{
"id": "5555",
"name": "Child - Child - Child - Child"
}, {
"id": "522e9327-0747-4080-b6e2-d57e726b5b26",
"name": "Child - Child - Child - Child 2"
}],
}],
}],
}],
}]
var namesArray = [];
var recur = function(obj) {
namesArray.push(obj.name);
if(obj.steps) {
obj.steps.map(recur);
}
}
jsonArray.map(recur);
console.log(namesArray);

You can also try
function getObjectKeyValues(obj, objKey) {
var result = [];
JSON.stringify(obj, function(key, value) {
if (key === objKey) {
result.push(value)
}
return;
});
return result;
}
Check:
MDN JSON.stringify()

Categories