Determine the parent nodes of an item in an array tree

My array represents different groups, structured like so:

  • Company Name
  • IT
  • Finance
    • Global Finance
      • Financial Department
    • Tax and Co.

My goal is to select a specific node (such as Financial Department) and create a new array containing that node and its parent nodes (Global Finance, Finance, and Company Name, which is the static root node).

I am working with AngularJS (specifically angular-ui-tree and angular-ui-tree-filter) and have access to jQuery, third-party libraries, and more.

Is there an efficient method to achieve this? Before attempting it myself, I figured I would inquire here in case someone has already tackled a similar task.

Example of the Array:

$scope.groups = [{
        "id": 1,
        "title": "Company Name",
        "selected": "",
        "enabled": "",
        "CampaignId": "string",
        "TenantId": "string",
        "CompanyId": "string",
        "items": [{
            "id": 2,
            "title": "Board of Directors",
            "selected": "",
            "enabled": "",
            "CampaignId": "string",
            "TenantId": "string",
            "CompanyId": "string",
            "items": []
        }, {
            "id": 3,
            "title": "Finance",
            "selected": "",
            "enabled": "",
            "CampaignId": "string",
            "TenantId": "string",
            "CompanyId": "string",
            "items": [{
                "id": 4,
                "title": "Global Finance",
                "selected": "",
                "enabled": "",
                "CampaignId": "string",
                "TenantId": "string",
                "CompanyId": "string",
                "items": [{
                    "id": 5,
                    "title": "Financial department",
                    "selected": "",
                    "enabled": "",
                    "CampaignId": "string",
                    "TenantId": "string",
                    "CompanyId": "string",
                    "items": []
                }, {
                    "id": 6,
                    "title": "Region Asia Pacific",
                    "selected": "",
                    "enabled": "",
                    "CampaignId": "string",
                    "TenantId": "string",
                    "CompanyId": "string",
                    "items": []
                }]
            }, {
                "id": 7,
                "title": "Tax & Co.",
                "selected": "",
                "enabled": "",
                "CampaignId": "string",
                "TenantId": "string",
                "CompanyId": "string",
                "items": []
            }]
        }, {
            "id": 8,
            "title": "Sales",
            "selected": "",
            "enabled": "",
            "CampaignId": "string",
            "TenantId": "string",
            "CompanyId": "string",
            "items": []
        }, {
            "id": 9,
            "title": "Manufacturing",
            "selected": "",
            "enabled": "",
            "CampaignId": "string",
            "TenantId": "string",
            "CompanyId": "string",
            "items": []
        }
}];
javascriptangularjstreeangularjs-filterangular-ui-tree

Answer №1

After some searching, I discovered a different library called tree-model-js that enables me to navigate a tree structure, retrieve parent nodes, and access various other features. This has provided me with everything I was looking for.

Regards, Manuel

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

Utilizing i18n for moment formatting techniques

As I switch from moment to date-fns, I came across this code that involves moment, which I don't quite understand. However, I do comprehend the map function. this.events[0].dates.map(date => moment(date).format(this.$i18n.locale)) I set up an e ...

javascriptmomentjs

Improving Performance of a Large Unordered List using JavaScript

My website currently features a search box that retrieves images and displays them in a list format. Each image has an associated click event that triggers an overlay on the parent li element when clicked. However, with search results exceeding 300 images ...

javascriptjqueryhtmloptimization

Retrieve libraries from package-lock.json file

I am tasked with extracting all the libraries and versions from the package-lock.json file. Let me provide some context. I am implementing a security module within Jenkins to create an inventory of libraries used in each application. The goal is to gather ...

javascriptnode.jssecuritynpmlibraries

Transforming an Ionic mobile application into a web-based application: A step-by

I currently have a mobile app developed using Ionic. I now require a desktop-friendly website version of the app to cater to users who wish to access it from their computers. Can anyone point me to any resources or documentation that demonstrate that th ...

angularjshtmlwebweb-applicationsionic-framework

Struggling to modify a nested object in the state

import React, { Component } from 'react'; import ColorBox from './ColorBox' import './ColorBoxes.css' class ColorBoxes extends Component { state = { colors: {} } clickedColor = (color) => { le ...

javascriptreactjsobjectstatespread-syntax

Apply a border to the input field when the user enters or leaves the field, only if the value is

I am managing a few input fields and storing their information in an object. My goal is to click on an input field to focus on it, and if the field is empty or has a length greater than or equal to 0, I want it to display a red border. If I type somethin ...

javascriptvue.js

Incorporating an npm reference into a personalized node within Node-RED

As a novice in both the NodeRed and NodeJs/npm realms, I am embarking on the journey of creating a custom node for the first time. Despite my efforts to follow the official documentation on Creating your first node, I seem to have hit a roadblock. Everyth ...

javascriptnode.jsnode-red

Add an image tag to the Canvas element

I'm attempting to add an image to a canvas element. Consider this code snippet (http://jsfiddle.net/n3L6e1wp/). I am aiming to replace the text shown in the canvas with an img tag. I have attempted to substitute the content of the div with: <img s ...

javascriptjqueryhtmlcsscanvas

Organize data in Angular 'datatable' columns

I have set up a table with the following structure: <table class="table table-striped table-bordered table-hover" width="100%" datatable="ng" dt-options="options"> <thead> <tr> <th> Nannie ID</th> <th> Name</ ...

angularjsdatatables

Utilizing AngularJS ng-repeat for traversing nested JSON structures

The data structure in my JSON file appears as follows: $scope.peoples = [people:{ name: 'Mike ', age: 20 }, people:{ name: 'Peter S ', age: 22 }]; Note: I am unable to alter the JSON structure. Below is the issue with ...

angularjsjson

What steps can be taken to ensure that any new elements generated by JavaScript do not disappear upon refreshing the page

I am currently working on a project where I am creating a list by collecting user information and storing it in a MySQL database. When the user clicks the 'add' button, a new element is added to the bottom of the existing list which is coded in H ...

javascriptphpajax

Tips for designing a sophisticated "tag addition" feature

Currently, I am enhancing my website's news system and want to incorporate tags. My goal is to allow users to submit tags that will be added to an array (hidden field) within the form. I aim to add tags individually so they can all be included in the ...

phpjavascriptjqueryajax

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssanimation

Utilizing Cell References in the Table Component of React Material UI

I'm exploring React and aiming to create an editable table that dynamically updates the $/Unit cell based on changes in the Price and Units cells. I'm having trouble figuring out how to access values from other cells. Can this be achieved using ...

javascriptreactjsmaterial-ui

Use jQuery to dynamically update a text field within a table row based on a selection from

My understanding of JS and jQuery is not very strong. This is the HTML Output I created using a foreach-loop: $('#ProjectOfferPosition0IsystemTypeVariantId').on('change', function () { var prices = []; prices[1] = 500.00; ...

javascriptphpjquerycakephp

Performing a simulated click on a dynamically inserted element using pure JavaScript

I am faced with the challenge of programmatically navigating a ReactJS-based website in a looped workflow. The process involves clicking on Element1, dynamically altering the web page to add Element2, then clicking on Element2, and so on until eventually r ...

javascripthtmlreactjs

Having trouble getting the ionic lib update command line to work properly?

My current situation: $ionic lib update you sure you want to replace D:\Projects\cda-volunteer\www\lib\ionic with an updated version of Ionic? (yes/no): yes Unable to receive version data Here's my ionic info: Cordova ...

angularjscordovaionic-frameworknpm

ng-grid Adjusts its Height Automatically

Is there a way to make ng-grid automatically resize its height based on the page size? The official documentation for ng-grid suggests using a fixed height, but I found a helpful solution in this link: .ngViewport.ng-scope { height: auto !important; ...

angularjsng-grid

Switching back and forth between fluid text fields

Is there a way to navigate between dynamically generated textfields using an iterator from struts-tags? <s:iterator value="aList"> <td width="50px" align="center"> <s:textfield name="solField" size="2" maxlength="1" style="text-transform ...

javajavascriptiteratortextfieldstruts-tags

Ways to display JSON data in Angular 2

My goal is to display a list of JSON data, but I keep encountering an error message ERROR TypeError: Cannot read property 'title' of undefined. Interestingly, the console log shows that the JSON data is being printed. mydata.service.ts import { ...

javascriptjsonangular