Navigating through a multidimensional array in Angular 2 / TypeScript, moving both upwards and downwards

[
  {id: 1,
  name: "test 1",
  children: [
               {id: 2,
               name: "test 1-sub",
               children: []}
            ]
}]

Imagine a scenario where you have a JSON array structured like the example above, with each element potentially having child elements up to nine levels deep.

If you find yourself exploring this tree structure and need to navigate both up and down the hierarchy, it's straightforward to move down by selecting child elements based on their index. But what about moving back up the tree?

One approach could involve keeping track of two key elements on the page: the main array containing all the data and an indicator showing your current position within the array.

codes: any = [];
currentCode: any = {};

To streamline readability and navigation, consider displaying only one level of the tree at a time - starting with the main code and its immediate child elements below it.

Is there a need to record and map the specific path taken to reach a certain point in the tree, thus allowing you to traverse back up from the top whenever necessary?

I hope this clarification helps avoid any confusion!

Answer №1

Let's make the following assumptions:

  • Each ID is distinct
  • You only require access to the parent node and not the entire path

There are two possible solutions. One option is to modify the JSON structure or create a duplicate, adding a _parent field for every node. Another approach is to maintain a map where the IDs serve as keys and the parent nodes serve as values.

In both scenarios, you can populate the additional data by recursively traversing the tree.

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

What could be the reason for the bottom edge of my central diagonal image having a darker border?

I can't figure out why the border on the bottom edge of my image is darker. You can check out the demo here. To get a closer look at the issue, you can open a software like GIMP and zoom in on the following image to see the difference in values: http ...

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

Converting a JavaScript object into JSON format

I am currently working on serializing a JavaScript object to JSON. Here is the code I have written so far: var info = {}; ... $.each(data, function (key, value) { info["name"] = value.name; info["id"] = value.id; ...

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

When submitting, Redux objects are being submitted with empty values

Whenever I try to submit my form, the object is being submitted empty. This was confirmed using the redux dev-tool, where it shows that the object is empty upon submission. The expected behavior is for a card to appear on the DOM with the information enter ...

How can I retrieve an array from the server side using AngularJS?

Currently, I'm involved in developing a web application meant for team collaboration. While the login and signup pages have been set up, other members of my team are focusing on the server (built with node.js and express framework) and database aspect ...

Confusion arises between Bootstrap button plugin and Vue checkbox click event

After incorporating bootstrap.min.js into my Vue app, I noticed that the checkboxes' @click event is no longer triggered. This issue specifically occurs when using bootstrap's button-group with data-toggle="buttons". If I remove bootstrap.min.js, ...

Assess html code for Strings that include <% %> tags along with embedded scripts

Having a small issue with my code where I am receiving an HTML response from a web service as a java String. I need to display this String as HTML on my webpage, but the problem is that there are some script tags in the form of <% ... %> which are sh ...

Why isn't the unit test passing when it clearly should be?

I am encountering an issue with testing a simple function that I have created. Despite the fact that the function works correctly in practice, it is not being tested properly... Explanation of how my function operates (While it functions as intended, the ...

"Enhance the user experience by enabling clickable preview files in dropzone

After working on my Django project, I have implemented the following: <link href="{% static 'media/dropzone/dist/min/dropzone.min.css' %}" type="text/css" rel="stylesheet" /> <form class="dropzone" id="my-media-dropzone" action="/some/u ...

Retrieve a specific item from a JSON response using Node.js

When I receive a message from a WebSocket, the code snippet is triggered like this: ws.onmessage = (e) => { debugger if (e.data.startsWith('MESSAGE')) alert(JSON.stringify(e.data)) ImageReceived(e.data) c ...

Express: Every declaration of 'user' must have the same modifiers

In my application, I am utilizing both express and passport. Within these packages, there is a user attribute within the Request interface. Currently, the express package has a user attribute in the request object, such as req.user, but no additional prope ...

Different method of including the ng-click attribute on the body element

Greetings! I am currently developing a chrome extension and incorporating Angular to prevent any conflicts with other Angular pages. To avoid conflicts, I am attempting to set an ng-click on the body element. Here is the code snippet I used: var body = do ...

Running the `npm start` command in Angular tends to be quite time-consuming

When I use Visual Studio Code to run Angular projects, my laptop seems to take a longer time when running the server through npm start compared to others. Could this delay be related to my PC specifications, or is there something I can do to improve it? ...

Performing a task with JSON data passed in the Controller using MVC3 (Razor)

I recently tried passing my model from the View to the Controller using jQuery Ajax. Here's the code snippet I used: $.ajax({ data: model, type: "POST", url: '@Url.Action("createDoc")', datatype: "json", ...

Double clicking on a row value in a Bootstrap table

Struggling to retrieve the row value after a double click in a bootstrap table. Unfortunately, every attempt returns 'undefined'. Snippet of my code: $('#table').on('dbl-click-row.bs.table', function(field, value, row, $el) ...

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen. For better understanding, here is an accompanying image: https://i.stack.imgur.com/oy6d9.png However, the current co ...

Switching between two identical components can be easily achieved with VueJS

Assume I have a file named foo.vue, which I import into the parent component as components called a and b, and they are displayed based on a variable called show. When switching between components a and b in the parent without setting show = null, various ...

Encountering a problem with server-side jQuery autocomplete

I attempted to utilize a customized service I created in order to make this jquery autocomplete example work, but unfortunately it's not functioning properly. Here is the code snippet: $( "#city" ).autocomplete({ source: function( request, res ...

A Guide to Effectively Extracting Data from Second Level JSON Arrays with

Hi, I'm having difficulty fetching the two attributes under CategoryImage in the second level of the JSON array parsing. Can someone help me with this? Thank you. <script> $(document).ready(function() { var cat=""; ...