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

The function replace does not exist in t(…)trim

I encountered an error in my code that breaks the functionality when checked using console.log. var map = L.map('map').setView([0, 0], 2); <?php $classesForCountries = []; if (have_posts()) : while (have_posts()) : the_post(); ...

What is the best way to associate a select dropdown with a form in Angular 2 using formBuilder

After conducting some research, I was surprised to find that the process is not as straightforward as I had expected. I have come across various methods using ngModel, such as Bind and fetch dropdown list value in typescript and Angular2, among others. Ho ...

Avoiding default action on keyboard tab event resets cursor position while typing consecutively

Issue with cursor position resetting to start when tab is the last key pressed I am working on a chrome extension for Gmail using React and need to customize the behavior of the tab key. I have found that using preventDefault and stopImmediatePropagation ...

The video element in HTML5 is not showing up on Safari browsers, but it is functioning properly on Chrome

I have set up a video slider on my webpage. You can view the site The code is functioning perfectly on Chrome and iOS Safari, but there seems to be an issue on desktop browsers. When inspecting the page in Safari, the video elements are present in the HTM ...

NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification. https://i.sstatic.net/VZxM6.png https://i.sstatic.net/ahLkn.png CSS .modal-content{ ...

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

Assistance needed in obtaining the ID of a specific table row using jQuery

Currently, I am working on an AJAX request using Jquery and PHP. The task involves looping through an array to generate a table. During each iteration, a new ID is assigned to the table row. When users click on the "read me" link, additional content is f ...

Make a copy of an array and modify the original in a different way

Apologies for my poor English, I will do my best to be clear. :) I am working with a 3-dimensional array which is basically an array of 2-dimensional arrays. My task is to take one of these 2-dimensional arrays and rotate it 90° counterclockwise. Here is ...

Ways to merge values across multiple arrays

There is a method to retrieve all unique properties from an array, demonstrated by the following code: var people = [{ "name": "John", "age": 30 }, { "name": "Anna", "job": true }, { "name": "Peter", "age": 35 }]; var result = []; people. ...

Is there a way to reveal only the version information from the package.json file in an Angular 17 project?

Is there a secure way to extract and display only the version from a package.json file on the UI of a web application without exposing the rest of its contents? I am currently using the following structure in my package.json: { "name": "exa ...

Changing Marker Color in Google Maps API

There are multiple Google Maps Markers colors based on certain conditions being TRUE or not. In addition, these Markers will change color when the mouse hovers over a division (a1,a2..ax). I want the Markers to revert back to their original color when th ...

The JavaScript Discord Bot is having trouble connecting to a voice channel

I'm currently working on developing a discord bot using node.js. While I've successfully set it up to respond, I'm facing an issue with summoning it to a voice channel. Here is the snippet of code I am working with: switch (args[0]) { c ...

Tips for transferring the name field to a different page upon clicking

There are two pages in my project - the first one is called ItemMenuPage and the second one is called CartPage. The functionality I am trying to achieve is that when a user clicks on any item name on the ItemMenuPage, it should navigate to the CartPage, wi ...

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

I have been successfully using the TableDnD plugin for drag and drop functionality on table rows. However, I am now facing an issue with dynamically generated tables via AJAX. The code doesn't seem to work as expected when it comes to drag and droppin ...

Using Vue.js, pull information from a database to populate input fields using a datalist feature

I'm currently working on a project utilizing Laravel 8 and Vue 3, and I have a Student Component. Within this component, there is a datalist that allows me to search for existing students. When I select a student from the list, I want the correspondin ...

Chat lines in Chrome displaying double entries - troubleshooting needed

I developed a chat plugin for my website with a simple HTML structure: <div id="div_chat"> <ul id="ul_chat"> </ul> </div> <div id="div_inputchatline"> <input type="text" id="input_chatline" name="input_chatline" val ...

Is there a way to programmatically toggle a button's enabled state depending on the content of a text input field?

I want to create a functionality where a button will be enabled if the value in a textbox is 'mypassword'. If it's not equal to 'mypassword', then the button should be disabled. I've attempted the code below, but it doesn&apos ...

How to retrieve multiple person or group values in SharePoint using JavaScript

Names from my SharePoint list are stored with the field names 'People' and 'Responsible', added using a peoplepicker. These fields are of type 'person or group' in SharePoint. In my Service file, I have the following code: ...

Protractor experiencing timeout issues while trying to launch Chrome Driver on Centos machine

Trying to run the angular-phonecat tutorial on a Centos 6.5 machine with Chrome version 33.0.1750.146, npm 1.4.3, and node version v0.10.31. Attempting to execute protractor tests: npm run protractor Encountering the following error, seeking guidance for ...

"Clicking on a jQuery div will cause it to slide down, and clicking again

I am currently working on this code snippet: $("#right").click(function() { $("#signin").stop().slideDown(300); }); At the moment, it drops down when clicked, but I would like it to slideUp() when clicked again. Your help is appreciated. On a relate ...