Constructing nested array based on database data - javascript

I am using a template that renders a menu with a predefined structure. I have a database with some menus there and i am already retrieving them. The problem is that i need to somehow make the logic to construct the predefined structure with the menus i get from the database. Here it is an example of what i am trying to explain:
export const MainNav = [
{
icon: "pe-7s-rocket",
name: "Dashboards",
content: [
{
name: "Analytics",
url: "#/dashboards/analytics",
},
{
name: "Commerce",
content: [
{
name: "Blabla",
url: "#/dashboards/commerce",
},
{
name: "Sales",
url: "#/dashboards/sales",
},
]
},
],
{
name: "Minimal",
content: [
{
name: "Variation 1",
url: "#/dashboards/minimal-dashboard-1",
},
{
name: "Variation 2",
url: "#/dashboards/minimal-dashboard-2",
},
],
},
{
name: "CRM",
url: "#/dashboards/crm",
},
];
Basically it is an array of objects with nested arrays/objects.
I really need some guide, i think i need to use recursion but i don't know how. Basically a submenu will have to go inside the content property of their parent object.

Since the content key is always the one that potentially has children, check it's length and add a nested loop if it contains more than 1 child.
for (let i = 0; i < MainNav.length; i++) {
let parent = MainNav[i];
// create parent nav element here, accessing it's properties i.e. parent.name
if (parent.content) { //so you don't get reference errors
if (parent.content.length > 1) {
for (let v = 0; v < parent.content.length; v++) {
let nestedChild = parent.content[v];
// append child nav elements here
}
}
}
}

Related

Node Js how to fetch data from database in an hierarchical way

I'm writing a back code using NodeJs to fetch some data from backend, I want dataBase data to be like this
like this:
data = [{
name: "Admin",
id: '1',
children: [
{ name: "Admin", id: "1" },
{ name: "groupe1", id: "2" },
{
name: "groupe2", id: "1455", children: [
{ name: "groupe2", id: "1455" },
{ name: "gro", id: "5444" },
{ name: "hhrr", id: "45" }
]
}
]
}]
the idea is simple we have a list of group each group has a parent I want to display all the groups list in an hierarchical way the top one of the tree is done
Some groups are parents and groups in the same time and some others are only groups if the group is not parent we add an object with its name and ID in the array of children of his parent
if this groups is a parent that's mean it has children we add an object with its ID and name in the array of children of his parents, and we add property children for the object which is array named children with for the first time an object with the name and the id of the group etc...
i tryed to do this but it did not work
const getParentsByType = async ({ name, _id }) => {
let parentResult = [
{
id: _id,
name: name,
children: [
{
id: _id,
name: name,
},
],
},
];
parentResult= await findParent(_id, parentResult[0].children, 0);
return parentResult;
};
const findParent = async (parentId, parentResult, itemPos) => {
let children = await Models.GroupModel.find({ parent: parentId, status: true }).select('name _id');
for (let i = 0; i < children.length; i++) {
let childrenList = await Models.GroupModel.find({ parent: children[i]._id, status: true }).select('name _id');
if (childrenList.length != 0) {
parentResult.push(buildParentWithChild(children[i]._id, children[i].name));
findParent(children[i]._id,parentResult.children[i],itemPos++)
} else {
parentResult.push(buildParent(children[i]._id, children[i].name));
}
}
return parentResult
};
and this the model of the data base
const Group = mongoose.Schema({
name: {
type: String,
required: true,
},
status: {
type: Boolean,
required: true,
},
parent: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Group',
},
});
i had two days trying to resolve tis but with no result
i need some helps and Thank you
Try parsing your returned data. It validates your data as objects i dont see any problem with your function regardless i still have no idea what format your a trying to build.
let children = JSON.parse(JSON.stringify(await Models.GroupModel.find({ parent: parentId, status: true }).select('name _id')));
let childrenList = JSON.parse(JSON.stringify(await Models.GroupModel.find({ parent: children[i]._id, status: true }).select('name _id')));
If I understand you right, you want to convert the array returned by Models.GroupModel.find, and which looks like
var dbresult = [
{_id: "1", parent: null, name: "one"},
{_id: "2", parent: "1", name: "two"}
];
into a hierarchical structure. This can be done with a function that adds all children of a given parent p, including, recursively, their children. Like the following:
function children(p) {
var result = [];
for (r of dbresult) if (r.parent === p) {
var row = {_id: r._id, name: r.name};
var chld = children(r._id);
if (chld.length > 0) row.children = chld;
result.push(row);
}
return result;
}
console.log(JSON.stringify(children(null)));
Note that this approach requires only one database access (to fill the dbresult) and is therefore probably faster than your findParent function.

How to traverse through a tree like nested data structure of unknown depth in order to find and collect addressable array items?

Say I have an array that looks as such:
[{
"name": "Audiograms",
"folders": [{
"name": "2022"
}, {
"name": "2021"
}, {
"name": "2020"
}]
}, {
"name": "Patient Paperwork"
}, {
"name": "Repairs"
}]
And this array can have an infinite amount of objects and sub-objects, similar to a file tree.
I have an array letting me know the name of the folders I need to access from the root of the object, like:
["Audiograms", "2022"]
I also do not know this value ahead of time, nor do I know how many items are in this array ahead of time.
How would I be able to actually traverse this file tree using the array of names? I wish to do things like maybe pop the matching object out and move it to another part of the file tree.
Thank you!
OP
"I wish to do things like maybe pop the matching object out and move it to another part of the file tree."
In order to achieve follow-up tasks like the above mentioned one, the next provided solution walks the OP's folder structure and collects for each addressable match an object of two references, target and parent, where the former is the reference of the to be found folder-item, and the latter is the reference of its parent folder-item.
The solution got achieved by a recursively implemented reducer function.
function collectAddressableFolderRecursively(collector, folderItem) {
const { name = null, folders = [] } = folderItem;
const {
address: [parentName, childName], result,
} = collector;
if (name === parentName && folders.length) {
const targetFolder = folders
.find(({ name }) => name === childName) ?? null;
if (targetFolder !== null) {
result.push({
target: targetFolder,
parent: folderItem,
});
}
}
result.push(
...folders.reduce(collectAddressableFolderRecursively, {
address: [parentName, childName],
result: [],
})
.result
);
return collector;
}
const folders = [{
name: 'Audiograms',
folders: [{
name: '2022',
folders: [{
name: 'Audiograms',
folders: [{
name: '2022',
}, {
name: 'foo',
}],
}],
}, {
name: '2021',
}, {
name: '2020',
}]
}, {
name: 'Patient Paperwork',
}, {
name: 'Repairs',
folders: [{
name: 'Audiograms',
folders: [{
name: '2022',
}, {
name: 'bar',
}],
}, {
name: 'baz',
}],
}]
const address = ['Audiograms', '2022'];
const { result } = folders
.reduce(collectAddressableFolderRecursively, {
address,
result: [],
});
console.log({ address, result });
.as-console-wrapper { min-height: 100%!important; top: 0; }

How to create a new object with parts of existing object that may have nested object

I need to mirror the structure of page items in an InDesign document in a javascript object. I need it to match the nesting of page items in groups, groups within groups, etc.
This needs to be extensive to work with any InDesign document that is being worked on.
I need a recursive function that will build my object adding the child frames of any groups it finds and groups within those child frames, etc.
calling the same function if I find a group.
I've tried functions that call themselves if they come across a group, but I get a stack error on large files, on smaller files I only get results that go two levels deep.
var doc = app.activeDocument;
var page = doc.pages[0];
var article = {
id: page.id,
frames: new Array()
}
for(i=0;i<page.pageItems.length;i++){
var po = page.pageItems[i];
var frame_objs = new Array();
var frame_obj = {id: page.pageItems[i].id};
if(po.getElements()[0].constructor.name == "Group"){
frame_obj.frames = getChildFrames(po.pageItems);
}
article.frames.push(frame_obj);
}
create_file("~/Desktop/", "article.json", article);
function getChildFrames(pi_children){
var child_frame_objs = new Array();
for(i=0;i<pi_children.length;i++){
var child_obj = {id: pi_children[i].id};
if(pi_children[i].constructor.name == "Group"){
child_obj.frames = getChildFrames(pi_children[i].pageItems);
}
child_frame_objs.push(child_obj);
}
return child_frame_objs;
}
The idea is to create a object something like this:
{
id: 1,
components: [
{
type: "TextFrame",
id: 201,
}
{
type: "Group",
id: 203,
childFrames: [
{
type: "Rectangle",
id: 1102
},
{
type: "Group",
id: 2034,
childFrames: [
{
type: "TextFrame",
id: 2345
},
{
type: "Group",
id: 99983,
childFrames: [
etc...
]
}
]
}
]
}
]
}
I expect to get a properly simplified version of the page frames structure. As deeply nested as the layout is.
Can someone help me understand how to do this?

How to build tree array from flat array of object with category and subCategrie properties

I am trying to build tree array from flat array, each item in the flat array has two property need to be used to build the tree array, they are 1. category. 2. subCategrie which is array of string.
let data = [
{
id: 1,
name: "Zend",
category: "php",
subCategory: ["framework"]
},
{
id: 2,
name: "Laravel",
category: "php",
subCategory: ["framework"]
},
{
id: 3,
name: "Vesion 5",
category: "php",
subCategory: ["versions"]
},
{
id: 4,
name: "Angular",
category: "frontend",
subCategory: ["framework", "typescript"]
},
{
id: 5,
name: "Aurelia",
category: "frontend",
subCategory: ["framework", "typescript"]
},
{
id: 6,
name: "JQuery",
category: "frontend",
subCategory: []
}
];
It should be
let tree = [
{
name: "php",
children: [
{
name: "framework",
children: [
{
id: 1,
name: "Zend"
},
{
id: 2,
name: "Laravel"
}
]
},
{
name: "versions",
children: [
{
id: 3,
name: "Vesion 5"
}
]
}
]
}
// ...
];
Is there any article, link solving similar problem?
I gave it many tries but stuck when trying to build the sub categories children.
Here's my last attempt which throws error and I know it's wrong but it's for the ones who want to see my attempts
const list = require('./filter.json')
let tree = {};
for (let filter of list) {
if (tree[filter.category]) {
tree[filter.category].push(filter);
} else {
tree[filter.category] = [filter];
}
}
function buildChildren(list, subcategories, category, index) {
let tree = {}
for (let filter of list) {
if (filter.subcategory.length) {
for (let i = 0; i < filter.subcategory.length; i++) {
let branch = list.filter(item => item.subcategory[i] === filter.subcategory[i]);
branch.forEach(item =>{
if (tree[filter.subcategory[i]]){
tree[filter.subcategory[i]] = tree[filter.subcategory[i]].push(item)
}else{
tree[item.subcategory[i]] = [item]
}
})
}
}
}
console.log('tree ', tree);
}
Heads up, For javascript I usually use Lodash (usually written as _ in code) but most of these methods should also be built in to the objects in javascript (i.e. _.forEach = Array.forEach())
const tree = [];
// First Group all elements of the same category (PHP, Frontend, etc.)
data = _.groupBy(data, 'category');
_.forEach(data, function (categoryElements, categoryName) {
// Each Category will have it's own subCategories that we will want to handle
let categorySubCategories = {};
// The categoryElements will be an array of all the objects in a given category (php / frontend / etc..)
categoryElements.map(function (element) {
// For each of these categoryies, we will want to grab the subcategories they belong to
element.subCategory.map(function (subCategoryName) {
// Check if teh category (PHP) already has already started a group of this subcategory,
// else initialize it as an empty list
if (!categorySubCategories[subCategoryName]) { categorySubCategories[subCategoryName] = []; }
// Push this element into the subcategory list
categorySubCategories[subCategoryName].push({id: element.id, name: element.name});
});
});
// Create a category map, which will be a list in the format {name, children}, created from
// our categorySubCategories object, which is in the format {name: children}
let categoryMap = [];
_.forEach(categorySubCategories, function (subCategoryElements, subCategoryName) {
categoryMap.push({name: subCategoryName, children: subCategoryElements});
});
// Now that we've grouped the sub categories, just give the tree it's category name and children
tree.push({name: categoryName, children: categoryMap});
});
};
The key to success here is to create an interim format that allows for easy lookups. Because you work with children arrays, you end up having to use filter and find whenever you add something new, to prevent duplicates and ensure grouping.
By working with a format based on objects and keys, it's much easier to do the grouping.
We can create the groups in a single nested loop, which means we only touch each item once for the main logic. The group has this format:
{ "categoryName": { "subCategoryName": [ { id, name } ] } }
Then, getting to the required { name, children } format is a matter of one more loop over the entries of this tree. In this loop we move from { "categoryName": catData } to { name: "categoryName", children: catData }
Here's an example that shows the two steps separately:
const data=[{id:1,name:"Zend",category:"php",subCategory:["framework"]},{id:2,name:"Laravel",category:"php",subCategory:["framework"]},{id:3,name:"Vesion 5",category:"php",subCategory:["versions"]},{id:4,name:"Angular",category:"frontend",subCategory:["framework","typescript"]},{id:5,name:"Aurelia",category:"frontend",subCategory:["framework","typescript"]},{id:6,name:"JQuery",category:"frontend",subCategory:[]}];
// { category: { subCategory: [ items ] } }
const categoryOverview = data.reduce(
(acc, { id, name, category, subCategory }) => {
// Create a top level group if there isn't one yet
if (!acc[category]) acc[category] = {};
subCategory.forEach(sc => {
// Create an array for this subCat if there isn't one yet
acc[category][sc] = (acc[category][sc] || [])
// and add the current item to it
.concat({ id, name });
});
return acc;
},
{}
)
const nameChildrenMap = Object
.entries(categoryOverview)
// Create top level { name, children } objects
.map(([cat, subCats]) => ({
name: cat,
children: Object
.entries(subCats)
// Create sub level { name, children } objects
.map(([subCat, items]) => ({
name: subCat,
children: items
}))
}))
console.log(nameChildrenMap);

Combine strings and arrays into JSON properly

I've fetched some data from XML document and assigned them into three variables. Root element name, array which contains all the names of root's children and second array with length of those children sub-nodes. I want to convert those variables into the JSON object in this way:
{ "root_name": {
"childName[0]": "lengthSubNodes[0]",
"childName[1]": "lengthSubNodes[1]",
"childName[2]": "lengthSubNodes[2]",
}
with this function:
function XMLtoJSON(rootName,childNames,childNumbers){
var xmlObject = {}
xmlObject[rootName] = {};
for(var i = 0; i < childNames.length; i++ ){
xmlObject[rootName][childNames[i]] = childNumbers[i];
}
}
Everything works fine. However when it comes to XML document with many root's children with the same name and length they appear just once like this:
{ "catalog": {
"book": 6
}
and should look like this:
{ "catalog": {
"book":6,
"book":6,
"book":6
}
Do you know how to fix it?
You cannot have multiple keys of the same name under one parent. Also, nodes in xml have an order, which is lost under a js map. So if you want a xml to json utility, you need to create yourself a json schema. Here is a simplistic example:
{
name: "catalog",
value: null,
children: [
{
name: "book",
value: 6
},
{
name: "book",
value: 6
},
{
name: "book",
value: 6
},
]
}

Categories

Resources