Insert the object into a designated location within a multi-dimensional array

Question

Insert the object into a designated location within a multi-dimensional array

I've integrated a tree view into my Angular project and I'm looking to add an object to a specific position within an array.

array

const TREE_DATA: TreeNode[] = [{"name":"Demo","id":"demo_1","children":[{"name":"Folder","id":"folder_1","children":[{"name":"File","id":1},{"name":"Doc","id":2}]},{"name":"Folder 2","id":"folder_2","children":[{"name":"doc file","id":3},{"name":"word","id":4}]}]},{"name":"Projects","id":"pro_1","children":[{"name":&...
const obj = { name: 'information', id: 50 }

and expected is

[{"name":"Demo","id":"demo_1","children":[{"name":"Folder","id":"folder_1","children":[{"name":"File","id":1},{"name":"Doc","id":2}]},{"name":"Folder 2","id":"folder_2","children":[{"name":"doc file","id":3},{"name":"word","id":4}]}]},{"name":"Projects","id":"pro_1","c...

How do I insert the object at a specific position based on its Id in the array?

javascript typescript

Answer 1

Answer №1

Hey @DanteDX, I was hoping for something like the code snippet below. It seems my question may have been a bit unclear, as I didn't receive a response from you.

private performSearch(items: TreeNode[], term: string): any[] {
        return items.reduce((acc: TreeNode[], item: TreeNode) => {
            if (this.checkIfContains(item.name, term)) {
                acc.push(item);
            } else if (item.children && item.children.length > 0) {
                let newItems = this.performSearch(item.children, term);
                if (newItems.length > 0) {
                    acc.push({ ...item, children: newItems });
                }
            }
            return acc;
        }, []);
    }

    private checkIfContains(text: string, term: string): boolean {
        return text.toLowerCase().indexOf(term.toLowerCase()) >= 0;
    }

Answer 2

Hey @DanteDX, I was hoping for something like the code snippet below. It seems my question may have been a bit unclear, as I didn't receive a response from you.

private performSearch(items: TreeNode[], term: string): any[] {
        return items.reduce((acc: TreeNode[], item: TreeNode) => {
            if (this.checkIfContains(item.name, term)) {
                acc.push(item);
            } else if (item.children && item.children.length > 0) {
                let newItems = this.performSearch(item.children, term);
                if (newItems.length > 0) {
                    acc.push({ ...item, children: newItems });
                }
            }
            return acc;
        }, []);
    }

    private checkIfContains(text: string, term: string): boolean {
        return text.toLowerCase().indexOf(term.toLowerCase()) >= 0;
    }

Insert the object into a designated location within a multi-dimensional array

Answer №1

Similar questions

Turn off the feature that highlights links

Restrict the maximum and minimum time that can be entered in an HTML input

After clicking on the About page in Vue, my data seems to vanish into thin air

The Vue CLI build is displaying a blank page when hosted on an Apache server

Uploading a CSV file in JSON format to Amazon S3 with Node.js

Exploring the Interplay of Classic ASP and AJAX Variables References

Immediate family members nearby are not an option. We will have to create the form dynamically

trigger a p:ajax event by employing a right-click action

What is the process for incorporating an additional input in HTML as you write?

Unexpected behavior with Node js event listener

Is there a way to retrieve a numerical value from within two specific elements when web scraping?

What purpose does the symbol '$' serve in React component properties?

What steps do I need to take in order to activate scrolling in a Modal using Material-UI

Tips for utilizing a personalized design with the sort-imports add-on in VS Code?

How can I make a basic alert box close after the initial click?

Ways to verify if the inner <div> contains any text

Error code 12030: AJAX request status

Show information from the state using React and Typescript

Is it possible to update both package-lock.json and package.lock simultaneously?

What is the process for eliminating the invocation of a function in Jquery?