Discovering an array in Typescript containing a specific attribute, followed by embedding another array within that array

Below is an interface with a constant that inherits it:

interface TreeNode {
    name: string;
    children?: TreeNode[];
}

const TREE_DATA: TreeNode[] = [
    {
        name: 'Mes services',
    }, {
        name: 'Logiciels externes',
        children: [
            { name: 'Facturation' },
            { name: 'Add-on' },
        ]
    }, {
        name: "Collecteurs d'espace client",
        children: [
            { name: 'Banques' },
            { name: 'Fournisseurs' },
        ]
    }, {
        name: 'Services partenaires',
        children: [
            { name: 'Avocats' },
        ]
    }
];

I want to identify the array with the Collecteurs d'espace client name attribute and then include a new TreeNode in its children array.

Answer №1

If you are looking for the item with that specific name:

const selectedNode = TREE_DATA.find(item => item.name === "Collecteurs d'espace client")

You can modify it according to your needs:

selectedNode.children = whatever

// or

selectedNode.children.push(whatever)

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

Angular - The type 'ISiteInfo | null' cannot be assigned to the parameter type 'ISiteInfo | undefined'

Within my Angular-12 project, I have defined the following model interface: export interface ISiteInfo { id: number; name: string; email: string; } In addition to this interface, I have a service as well: import {ISiteInfo} from '../models/s ...

In TypeScript, is it possible to determine an object's type and then enhance it using a type specified through generics?

I am currently working on a TypeScript function that takes an object as a parameter and deduces its type, then merges that inferred type with another type provided via generics. The outcome should be an object that includes properties from both the inferre ...

I'm having trouble managing state properly in Safari because of issues with the useState hook

Encountering Safari compatibility issues when updating a component's state. Though aware of Safari's stricter mode compared to Chrome, the bug persists. The problem arises with the inputs: https://i.sstatic.net/WSOJr.png Whenever an option is ...

"Exploring the world of Typescript declarations and the CommonJS module

I'm encountering confusion while creating declaration files (d.ts). For instance, I have developed an NPM package called "a" with a single CommonJS module index.ts: export interface IPoint { x: number; y: number; } export default function s ...

How can we access class variables using "this" in Angular 2 TypeScript?

I am struggling to access the object "sessions" in this code snippet. The problem seems to be that "this" is null: /// <reference path="chrome/chrome-app.d.ts" /> import { Component, Input, OnInit } from '@angular/core'; import { AppServi ...

After utilizing the d3-scale function to declare an object, my developer visual suddenly ceases to function

Upon completing a section of a Power BI tutorial, the developer encountered a visual that displayed nothing but a blank page (despite running correctly). Unable to pinpoint the issue, debugging was initiated. The following test code snippet for debugging w ...

Configuring routes for Angular4 router is a vital step in creating a

Issue: I am currently setting up routes for my application, aiming to structure the URL as https://localhost:4200/hero=id, where the 'id' will be dynamically selected. However, this setup is not functioning as expected. If I attempt to use a URL ...

An issue arises when attempting to retrieve various Modules depending on the specific type of Module that is provided

My goal is to pass an array of different types to generate various combinations of submodules. However, I am currently only passing a single type which works fine. When I try to pass multiple types, the compilation fails. What steps can I take to resolve ...

What are the types of tuple lookups using mapped types in TypeScript

Since the introduction of mapped tuple types in typescript 3.1, I was eager to see if this code sample would function as expected: export interface SettingKey { General_Language: 'en' | 'sl'; Map_InitialLongitude: number; M ...

Error in TypeScript: Typography type does not accept 'string' type as valid

As I attempt to implement the Typography component from material-ui using TypeScript, I encounter a perplexing error message TypeScript is throwing an error: Type 'string' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLE ...

What is the best approach to incorporate a stopwatch?

I'm exploring ways to track the time it takes for a user to click a button. While I have a working solution, I'm curious if there's a more efficient method available. Below is my current implementation: export class MainComponent implements ...

Issue with assigning object properties in Internet Explorer 11 with ECMAScript

I recently made some changes to my Angular7 app, including an upgrade to Angular7 and upgrading package dependencies. However, I encountered an issue when testing my app on PROD Internet Explorer 11. While there are no problems when testing on localhost, o ...

Verifying that the font color in Cypress does not match the expected one

For a certain condition, I needed to ensure that the font color is red. To achieve this, I used the following assertion: return cy.xpath(`xpathcondition`) .should('have.css','-webkit-text-fill-color','rgb(208, 25, 71)') I ...

Data has not been loaded into the Angular NGX Datatable

As a beginner in Angular, I am struggling to set data from the module. ngOnInit() { this.populate(); } public populate() { this.productService.getAllProduct('6f453f89-274d-4462-9e4b-c42ae60344e4').subscribe(prod => { this. ...

TypeScript - Issue with generic function's return type

There exists a feature in typescript known as ReturnType<TFunction> that enables one to deduce the return type of a specific function, like this function arrayOf(item: string): string[] { return [item] } Nevertheless, I am encountering difficulti ...

"Exploring the process of creating a custom type by incorporating changes to an existing interface

One of the challenges I'm facing is defining an object based on a specific interface structure. The interface I have looks like this: interface Store { ReducerFoo : ReducerFooState; ReducerBar : ReducerBarState; ReducerTest : ReducerTestSt ...

App that uses Angular 2 for real-time data refreshing

As a newcomer to Angular and Nodejs, I am venturing into the development of a MEAN stack cryptocurrency exchange application. My approach involves setting up a nodejs backend to retrieve the current exchange rate from an API and presenting it in the HTML. ...

Is the TypeScript Callable interface unable to be called?

I am currently in the process of developing a customized version inspired by ts-optchain. The main goal is to create a functionality that produces a duplicate of the original object with specific modifications incorporated without altering the original obj ...

Rollup TypeScript: generating declarations for dist, cjs, and es modules

I am working on packaging a TypeScript library using rollup with declaration (d.ts) files, and I am aiming to generate both cjs and es versions. After brainstorming, I came up with the following rollup configuration: const {nodeResolve} = require('@r ...

Steps for updating the same array in TypeScript

I have written a reducer code where I check if the same value is already present in the array. If it is, I update the previous value instead of pushing the same value again. Here is my code snippet: export function reducer( state: IDeviceState = ...