I need to search through a tree structure in typescript based on a specific value without encountering a maximum stack call exceeded error

How can I perform a value-based search on a complex tree structure in TypeScript without encountering the maximum stack call exceeded error? I am attempting to navigate through an expandable tree using TypeScript, and I will provide the code snippet below for reference:

tree= [
    {
        "size": -1320,
        "offset": 0,
        "value": "E",
        "subNodes": [
            {
                "size": 48,
                "offset": 0,
                "value": "D"
            },
            {
                "size": 48,
                "offset": 0,
                "value": "D"
            },
            {
                "size": 48,
                "offset": 0,
                "value": "D"
            }
         ],
{
        "size": -1320,
        "offset": 0,
        "value": "E",
        "subNodes": [
            {
                "size": 48,
                "offset": 0,
                "value": "D"
            },
            {
                "size": 48,
                "offset": 0,
                 "value": "D",
               "subNodes": [
                    {
                     "size": 48,
                      "offset": 0,
                      "value": "D"
                  },
                  {
                      "size": 48,
                   "offset": 0,
                      "value": "D"]
             }]]

I keep hitting the maximum call stack limit! The recursive function might be causing this issue. Is there a way to search based on just the letters of the value? Below is my current implementation:

 searchTree(protcolTree: Array<SessionTree>, searchString: string): Array<SessionTree> {
        if (this.protocolTree[0].value === searchString) {
            this.protocolTree = protcolTree;
        } else if (this.protocolTree.length) {
            let result: Array<SessionTree> = null;
            for (let i = 0; result === null && i < this.protocolTree.length; i++) {
                 result = this.searchTree(this.protocolTree[i].subNodes, searchString);
          }
            this.protocolTree = result;
            return result;
       }
        return this.protocolTree;
   }

Answer №1

  findNodesInTree(treeData: Array<SessionTree>, targetString: string): void {
        this.protocolTree.filter(node => node.value === targetString);
    }

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

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

I am new to Angular2 and have followed the Angular2 quickstart and tutorial to get started. Just to provide some context, when a user clicks on a link in the top navigation bar of my webapp, it triggers a server side request. The resulting page returned t ...

Could this type declaration in the Vue decorator constructor be accurate?

When using Vue decorator notation, I typically write it like this: @Prop({ type: Object || null, default: null }) However, I noticed in the Vue documentation that they use array notation: @Prop({ type: [ Object, null ], default: null }) Is there a specif ...

unable to make a request to the express server with axios

I am in the process of developing a chat application similar to whatsapp. One of the key features I'm working on is that when a user clicks on another person's name, their chats will be displayed. However, currently, I'm facing an issue wher ...

Comparison between referencing the DOM and storing references to the DOM elements

Can you explain the contrast between these two statements? $("#txt").val("123"); versus var txt=$("#txt"); txt.val("123"); Which statement is considered more effective in terms of efficiency? ...

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

Enable the click functionality for a disabled MI TextField

I'm utilizing a disabled TextField in my project and updating it using React Hooks useState to modify the value property of the TextField. const [employee , setEmployee] = React.useState('') <TextField fullWidth ...

Is it possible to directly update the label text in AngularJS from the view itself?

I found the following code snippet in my HTML <span ng-class="newProvider ? 'newProvider' : ''" class="help-block"> {{ 'new-product.provider.helper' | locate }} </span> Whenever newProvider is se ...

Tips for updating the position on a website using AJAX

I am developing a website that pulls data from a MySQL database and showcases it on a map. How can I implement an automatic data refresh on the webpage every second? Should I incorporate my AJAX code within a timer function? Do I need to put the PHP scri ...

Error Message: The specified HTML element already contains two instances of the WebViewer, leading to a conflict in PDFTron React TypeScript Next

Having some trouble using pdftron with my docx editor. I can use the editor fine, but keep encountering an error like the one shown below: https://i.stack.imgur.com/OnJxE.png https://i.stack.imgur.com/l9Oxt.png Here is a snippet of my code: wordeditor.t ...

Angular Object Error: Unhandled Exception

As someone who is new to Angular, I am still trying to grasp how it functions. However, I have encountered an issue early on that is causing the below code to produce an "Uncaught Object" error in the console and disrupt Angular functionality. It seems t ...

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

jQuery still not running despite using .ready

I have been attempting to run some jQuery code on my HTML page. After doing some research, I learned that using .ready may be necessary to ensure the DOM is fully loaded before executing the script. Despite this, I am still having trouble getting the scrip ...

Tips for building a versatile client-server application with separate codebases for the JavaScript components

We are embarking on the process of rebuilding our CMS and leveraging our expertise with VueJS. Despite our familiarity with VueJS, we won't be able to create a full single-page application due to the presence of server-side rendering files (JSP). The ...

Utilizing typesafe trpc in Node.js to efficiently transfer data between routes

I have successfully implemented an end-to-end typesafe API using the T3 Stack and can access all the data and types in my Next.js app. However, I also have a Node.js backend to populate my database with. My Node.js setup is as follows: app.use( '/t ...

Retrieving information selectively using useSWRImmutable

Having issues fetching data using useSWRImmutable. The problem arises when attempting to display the fetched data inside the UserRow component. Even though I can successfully print the data outside of the UserRow component, any console.log() statements wi ...

Is it possible to execute a command in the terminal that is related to the package.json file?

Objective Create a program to analyze user engagement data for a hypothetical menu planning calendar app. The program should be able to track the activity of users based on their meal planning within the app. Data Overview In the ./data folder, there ...

Having trouble with obtaining precise mouseup and mousedown coordinates

Currently, I am working with react and typescript for my project. I have implemented a canvas element where I am attempting to draw a rectangle based on mouseup and mousedown events. However, the issue I am facing is that the rectangles are being drawn in ...

What is the best way to add an external .js file to my Angular 2 application?

I'm currently working on a project using Angular 2's TypeScript API along with webpack to develop a web application. However, I've encountered an issue where one of my components needs to utilize functions from an external .js file that is p ...

Event handling in jQuery is not triggered when the input value is modified using VueJS

Currently, I am working on a major project that was originally developed in jQuery. We are now in the process of refactoring it using VueJS. Here's how the scenario looks: html <div id="app"> <input :value='myVal'/&g ...

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

I am using the Google Charts JS library on a single page within my project, with external and global headers and footers. The head tags are located in a head.php file, where all required JS libraries are included. The structure of my pages is as follows: ...