The ngx-treeview is displaying an inaccurate tree structure. Can you pinpoint where the issue lies?

I have structured my JSON data following the format used in ngx-treeview. Here is the JSON file I am working with:

[
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "JOURNEY",
    "value": 1
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "INVENTORY ASSURANCE",
    "value": 2
  },
  {
    "internalDisabled": false,
    "internalChecked": true,
    "internalCollapsed": false,
    "text": "SENSOR ASSURANCE",
    "value": 3
  },
  // Other JSON objects omitted for brevity
  

Even though my JSON data structure matches the expected display tree, there seems to be an issue. The checkbox for ACTIONABLE is supposed to be a parent, but it appears incorrectly under AVAILABILITY ASSURANCE. This discrepancy is causing confusion for both users and myself.

Answer №1

If you are utilizing the ngx-treeview package from npmjs, follow this link: https://www.npmjs.com/package/ngx-treeview?activeTab=readme

Here's how your JSON should be formatted:

const itCategory = new TreeviewItem([{
    "text": "JOURNEY",
    "value": 1
}, {
    "text": "INVENTORY ASSURANCE",
    "value": 2
}, {
    "text": "SENSOR ASSURANCE",
    "value": 3
}, {
    "text": "AVAILABILITY ASSURANCE",
    "value": 4
}, {
    "text": "ACTIONABLE",
    "value": 5,
    "children": [{
            "text": "Invalid Sensor Values",
            "value": 11
        },
        {
            "text": "Management View",
            "value": 12
        },
        {
            "text": "Actionable",
            "value": 13
        },
        {
            "text": "Informational",
            "value": 14
        }
    ]
}, {
    "text": "COMPLIANCE",
    "value": 6
}, {
    "text": "EXPENDITURE",
    "value": 7
}, {
    "text": "PROJECT",
    "value": 8
}, {
    "text": "REPORT",
    "value": 9
}, {
    "text": "ADMIN",
    "value": 10,
    "children": [{
            "text": "Access & Authorization",
            "value": 15,
            "children": [{
                    "text": "List Roles",
                    "value": 20
                },
                {
                    "text": "User Role Mapping",
                    "value": 21
                },
                {
                    "text": "List User Role Mapping",
                    "value": 22
                },
                {
                    "text": "Menu Authorization to Role-Function ",
                    "value": 23
                },
                {
                    "text": "Site Management",
                    "value": 24
                }
            ]
        },
        {
            "text": "Master Data Management",
            "value": 16,
            "children": [{
                    "text": "Function Master",
                    "value": 25
                },
                {
                    "text": "Feature Master",
                    "value": 26
                },
                {
                    "text": "Site to State Mapping",
                    "value": 27
                },
                {
                    "text": "Unit Cost (EB & DG)",
                    "value": 28
                },
                {
                    "text": "R4G States",
                    "value": 29
                }
            ]
        },
        {
            "text": "Escalation Matrix",
            "value": 17
        },
        {
            "text": "Facility Management",
            "value": 18,
            "children": [{
                    "text": "Create Facility",
                    "value": 30
                },
                {
                    "text": "Create Sub Facility",
                    "value": 31
                },
                {
                    "text": "Partial Variance",
                    "value": 32
                }
            ]
        },
        {
            "text": "Create New Role",
            "value": 19
        }
    ]
}])

Additionally, configure your settings as follows:

{
   hasAllCheckBox: true,
   hasFilter: false,
   hasCollapseExpand: false,
   decoupleChildFromParent: false,
   maxHeight: 500
}

Hopefully, these instructions will help you set up successfully.

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

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

I need to display selected values of a tree structure in a show box on the other side of the page using code. However, I also need to include HTML input boxes in some lines of the tree structure so that users can input data. The challenge is getting the in ...

Looking for a solution to the problem: Module 'import-local' not found

internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'import-local' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) Encoun ...

What is the best way to specifically update devDependencies in a project?

Is there a way to update devDependencies specifically using npm? Despite the answer provided in this related question, How do I update devDependencies in NPM?, focusing on updating all dependencies rather than just devDependencies. ...

Can I import an npm package into Nexus 2 by curling it?

I have attempted to use the following command: curl -v <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdaba4a1a8f08dbfaca3a9a2a0e0a3b8a0afa8bfe0aaa8a3a8bfacb9a2bfe0fce3fde3fde3b9aab7">[email protected]</a> -u adm ...

Detaching jQuery event listeners

Suppose I have two event handlers of the same type attached to the same object. The following example shows the mousemove event being attached to the window object. $('body').on('mousedown', '#uiScrollbar', function(e) { v ...

When passing e: EventTarget as a forwarded prop through a wrapper component, Typescript raises an error about the missing "value" property in the onChange function

In my project, there is a custom component called SelectField that serves as a wrapper for rendering label, helper text, and select input (inspired by TextField from @material-UI). The SelectField component exposes props like value and onChange, which are ...

various issues with fonts and Uncaught Eval error

I've been encountering multiple font/style errors and an uncaught eval. I have attached a picture for reference. My Angular application is not functioning properly, and I suspect these errors may be the reason. However, I am unsure of their significan ...

Tips for displaying HTML content dynamically in React using TypeScript after setting a stateVariable

To render an HTML block after successfully setting a state variable, I have defined my state variables and functions below. The code snippet is as follows: const formService = new FormService(); const [appointmentDate, setAppointmentDate] = us ...

Setting up SSH keys for git to use outside of Git Bash

As someone who is relatively new to git and primarily uses Windows for programming, I recently set up a React app using create-react-app. To deploy it on my github.io project page, I utilized gh-pages. Setting up an SSH key on my local machine and adding i ...

Unable to execute ajax on dom ready in Internet Explorer 9

Here is some code that needs to be executed on DOM ready without any user interaction: if($.browser.msie){ console.log("Using getJSON"); $.getJSON(baseUrl,function(){ alert('hi'); }); }else{ setTimeou ...

Tips on modifying the message "Please fill out this field" in the JQuery validation plugin

Is there a way to customize the message "This field is required" in the Jquery form validation plugin to display as "このフィールドは必須です"? Changing the color of the message can be achieved using the code snippet below: <style type="tex ...

The functionality of the Auth0 Logout feature has ceased to work properly following the

Previously, the code worked flawlessly on Angular version 14. However, after updating to version 17 due to persistent dependency issues, a problem arose. logout(): void { sessionStorage.clear(); this.auth.logout({ returnTo: window.location.origin } ...

Tips for updating the border color of a button:

Struggling to alter the border color of a button Attempting borderColor attribute proved futile: borderColor: '#FFFFFF' Anticipated result Code snippet: headerBtn: { backgroundColor: 'black', fontSize: '16px', f ...

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...

The requested resource lacks the 'Access-Control-Allow-Origin' header in a basic HTML form

Can someone help me understand why I keep encountering this error in my basic HTML form? I am attempting to display XML data on my website to showcase news stories, but unfortunately, I keep getting stuck with this persistent error. Any assistance would ...

Display or conceal section based on selected checkboxes

I'm currently working on a JavaScript script that involves showing/hiding elements based on radio button and checkbox selections. The goal is to reveal a hidden section when certain checkboxes are checked, as illustrated in the screenshot below: http ...

When a login attempt is unsuccessful, I am redirected to /api/auth/error using next-auth

Currently, I am utilizing next-auth version 4.18.8 on my login page for the final project of my Fullstack JS course. It's worth noting that a more recent version is being used compared to what was taught in the course (next-auth v. 3). Upon entering ...

Setting up the customized filename for precompiled Handlebars templates

When compiling Handlebars templates with the NPM package, is there a way to manually adjust the name/index that is generated? In my experience using Handlebars in various environments like Rails, NodeJS, and PHP, I've observed that the generated temp ...

Facing an ESIDIR error in NextJs, despite the fact that the code was sourced from the official documentation

For an upcoming interview, I decided to dive into learning Next.js by following the tutorial provided on Next.js official website. Everything was going smoothly until I reached this particular section that focused on implementing getStaticProps. Followin ...

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

In order to streamline my project and avoid messy paths, I am implementing absolute paths that will allow for consistent imports regardless of the file's location in the project tree. For this purpose, I made adjustments to the tsconfig.json: "paths ...