Strategies for sorting through numerous characteristics of a hierarchical array that may stretch across multiple levels of the tree

In order to simplify the process, I am looking for a way to filter multiple properties of a parent-child array that may have multiple levels. This is specifically for an Open Source datagrid library that is utilized by hundreds of users.

The array consists of parent/children references, with each child having the potential to have its own children and so on. The tree structure can go as deep as necessary. Additionally, I need the ability to filter not only based on the property defining the tree structure but also on any other properties/columns within the array.

For example, consider the following array which represents a file explorer list:

const myFiles = [
    {id: 11, file: "Music", parentId: null },
    {id: 12, file: "mp3", parentId: 11 },
    {id: 14, file: "pop", parentId: 12 },
    {id: 15, file: "theme.mp3", dateModified: "2015-03-01", size: 85, parentId: 14, },
    {id: 16, file: "rock", parentId: 12 },
    {id: 17, file: "soft.mp3", dateModified: "2015-05-13", size: 98, parentId: 16, },
    {id: 18, file: "else.txt", dateModified: "2015-03-03", size: 90, parentId: null, },
    {id: 21, file: "Documents", parentId: null, },
    {id: 2, file: "txt", parentId: 21 },
    {id: 3, file: "todo.txt", dateModified: "2015-05-12", size: 0.7, parentId: 2, },
    {id: 4, file: "pdf", parentId: 21 },
    {id: 22, file: "map2.pdf", dateModified: "2015-05-21", size: 2.9, parentId: 4 },
    {id: 5, file: "map.pdf", dateModified: "2015-05-21", size: 3.1, parentId: 4, },
    {id: 6, file: "internet-bill.pdf", dateModified: "2015-05-12", size: 1.4, parentId: 4, },
    {id: 7, file: "xls", parentId: 21 },
    {id: 8, file: "compilation.xls", dateModified: "2014-10-02", size: 2.3, parentId: 7, },
    {id: 9, file: "misc", parentId: 21 },
    {id: 10, file: "something.txt", dateModified: "2015-02-26", size: 0.4, parentId: 9, }
]

Although this array appears flat, it actually represents a tree view structure displayed in a datagrid.

To address this, I have implemented a method to add a 'treeMap' array to each item, which represents the hierarchy of files. This allows filtering based on specific columns.

Here is the method that accomplishes this:

export function modifyDatasetToAddTreeMapping(items: any[], treeViewColumn: Column, dataView: any) {
  // Implementation code here
}

Following the addition of the 'treeMap' arrays, the datagrid library's filter method can be used to implement filtering logic based on user-defined criteria.

If you are interested in accessing the complete implementation details or wish to contribute to enhancing this functionality, please refer to the provided links.

Answer №1

A method that I have devised appears to be quite efficient, although it may be beneficial to consider replacing map and reduce functions with traditional for-loops to further optimize speed. There are comparisons out there between forEach, map, etc., and for-loops, with for-loops often coming out ahead.

For a demonstration, you can view the code here: https://codepen.io/Alexander9111/pen/abvojzN

// JavaScript code snippet provided

In summary, the process involves setting up an object initially for locating all parents in the array. Then, one filter operation is performed based on the conditions specified in the columnFilters object. Subsequently, each element in the filtered array is mapped to find its respective parents using the previously created object (leading to nested iterations). Finally, the array is flattened using .flat() to complete the process.

If you have any questions, feel free to ask.

Update - Implementation using For-Loops and Reduced Iterations

I have made some enhancements by leveraging for-loop iterations to minimize redundant processing (https://codepen.io/Alexander9111/pen/MWagdVz):

// Updated JavaScript code snippet included

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using C++ structure pointers for array interop in C# programming

Introduction: I am dealing with a legacy c++ application that includes a COM component. One of the methods in this component is defined as: HRESULT foo(int* returnInteger) Originally, this method was supposed to return a single integer. However, the imp ...

The fragment shader must not declare any varyings with the same name but different type, or statically used varyings without being declared in the vertex shader. An example of this is

I'm struggling with shaders because I want the fog to be reflected in the water using Three.js sky_sun_shader. I added the following code snippet to the fragment Shader: THREE.ShaderChunk[ "fog_pars_fragment" ], THREE.ShaderChunk ["fog_fragment" ], ...

Mongoose throwing an UnhandledPromiseRejectionWarning due to an undefined issue

I am encountering a warning in my console while attempting to authenticate users using Mongoose: (node:20114) UnhandledPromiseRejectionWarning: undefined (node:20114) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated ei ...

I encountered a roadblock with my Npm start process when it got stuck at 70% completion after incorporating the "lazy

I have encountered a problem that has previously been discussed here, but none of the solutions seem to work for me. I recently incorporated this module into an existing project: import { NgModule } from '@angular/core'; import { CommonModule } ...

Animation with multiple meshes in Three.js

Having just started working with threejs, I decided to use a for loop to create 400 cylinders. The rendering of the objects in the scene works perfectly. However, when it comes to animating the cylinders, only one out of the 400 seems to rotate. How can I ...

What is the best way to dynamically update the selected option in a dropdown menu within a Rails application using a variable?

Working on a project that involves a select drop-down menu containing a list of currencies. Want to enhance user experience by automatically selecting the default value in the dropdown based on the user's country (will be utilizing the geoip gem). To ...

The tab indicator in Material-UI fails to update when the back button is clicked

My code is currently functioning well: The tab indicator moves according to the URL of my tab. However, there is a peculiar issue that arises when the back button of the browser is pressed - the URL changes but the indicator remains on the same tab as befo ...

Make sure to wait for the loop to complete before moving on to the next line

I am currently leveraging the capabilities of the GitHub API to fetch a list of repositories. Subsequently, I iterate over each repository and initiate another HTTP request to obtain the most recent commit date. How can I orchestrate the iteration process ...

What is preventing the control from being passed back from the PHP file to the AJAX success function?

My website is built using PHP, Javascript, and AJAX. Below is the essential code snippet: JS code (AJAX function): $("#btn_add_event").click(function(){ var strSeriaze = $( "#formAddEvent" ).serialize(); url = $( "#formAddEvent" ).attr('act ...

Learn how to display months on a countdown timer and then customize the format with basic JavaScript for a website

Looking to create a countdown page for the upcoming ICC cricket world cup event that displays the remaining days in two different formats: Format #1: 01 months 10 days 10 hours Format 2: 01 hours 20 minutes 10 seconds (If less than 2 days remain) I curr ...

Angucomplete-alt fails to display dropdown menu

On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...

Receiving the error message "Encountered issue reading property of 0" while attempting to retrieve a specific element from an array

Currently, I am facing an issue where I am trying to access a value that is set in one function within another function. When I attempt to return this value at the end, the console.log displays the value correctly. However, when I try to set it, I receive ...

Challenges arise when attempting to verify information in MongoDB and ExpressJS

I'm currently facing challenges with validating data using expressjs and mongodb. This section is meant for comments // mongodb setup var Server = require('mongodb').Server, Db = require('mongodb').Db, ObjectID = requir ...

Unlocking the Secrets of Returning Values in TypeScript

When checking the value of statusC and adding a new value for statusP, the process is as follows: If all statusC values are ACCEPTED => statusP will be set to ACCEPTED. If all statusC values are REJECTED => statusP will be set to REJECTED. In the cas ...

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

Experiencing an issue where my ajax call is ending up in the error function. I have noticed that my success function is empty, but I was expecting to receive messages from my servlet whether the data provided is correct or incorrect. The popup dialog displ ...

Utilize the value of one variable to determine access to another variable in Javascript

I am working with several boolean variables and I want to create a new variable that keeps track of the most recently changed boolean variable. This way, every time a new boolean variable is modified, I can toggle the previous one. If you have any ideas o ...

The slice() method in arrays provides a reference to the elements rather than copying

In my file, I am exporting an object in the following manner: export const LINECHART2_DATA = { series: [{ data: [], name: 'HR', }, { etc... }] } The way I import it is like this: import { LINECHART2_DAT ...

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

Identify all inputs that have been dynamically modified using AngularJS

I am currently working on a form that allows users to edit various fields. Some of these fields will automatically update with suggested values until the user makes changes ($dirty). To ensure users can see which fields have been modified, I would like to ...

Updating the color of the hamburger menu based on the scroll position using an event listener

Is there a way to change the color of my burger bar lines using event listeners? I'm trying to target the spans that make up the burger menu lines by assigning them a class "span". Here's what I have: var distFromTop = document.querySelector(".o ...