Incorporate a fresh element into an array containing objects using TypeScript in Angular

I am working with the following array structure:

{"succees":false,"message":"","success":true,"customers":
    [{"id_customers":2,
        "code_customers":"123444444",
        "trade_name":"world",
        }
    ]},
    [{"id_customers":1,
        "code_customers":"4444",
        "trade_name":"hello",
        }
    ]}
}

My question is, how can I add a new element to every object in this array?

The desired structure after adding the new element should look like this:

{"succees":false,"message":"","success":true,"customers":
    [{"id_customers":2,
        "code_customers":"123444444",
        "trade_name":"world",
        "collapse":true,   // The new element
        }
    ]},
    [{"id_customers":1,
        "code_customers":"4444",
        "trade_name":"hello",
        "collapse":true,   // The new element
        }
    ]}
}

I am using Angular for this task but unsure of the approach to take. Any guidance or assistance would be appreciated.

Thank you!

Answer №1

Consider utilizing Array.map for this task:

const newData = Object.assign({}, yourObject);
newData.customers.map((customer: any) => customer.showDetails = true);

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

typescript function discrimination

const enum Tag { Friday = 'Friday', Planning = 'Planing', } const test = (tag: Tag, task:/* ??? */): string => {/* some logic */} If tag is set to Tag.Friday, then the function task should expect a parameter of type (tour: strin ...

Navigate directly to the dashboard page in Angular 5 using RxJS without needing to load the main page first

Utilizing Firebase as the API in my application for authentication, database management, and storage. Implemented a main page (localhost:4200) that loads when the user is not logged in, and a dashboard (localhost:4200/dashboard) for authenticated users. ...

Divide the enhanced document into sections using TypeScript

In my project, I am working with Material UI and TypeScript. I have noticed that I need to declare the Theme interface and ThemeOptions in the same file for it to work properly. Is there a more efficient way to separate these declarations from the main t ...

Creating modern web applications using Angular and .Net Core with the power of Bootstrap 4

Has anyone experimented with developing an application using the following commands? dotnet new --install Microsoft.AspNetCore.SpaTemplates::* dotnet new angular You can find an example of this at this link. By default, the command creates an Angular + ...

Implementing multi-byte storage and retrieval in Forth: a guide

When dealing with large arrays, it would be beneficial to have the ability to adjust the array based on a specific number of bytes per number. I am mainly interested in efficient ways to read multi-byte numbers converted to singles on the stack and vice ve ...

Error encountered: Could not retrieve the previously selected frame due to EXC_BAD_ACCESS. Possible cause: Array size mismatch?

Discovering prime numbers using the Sieve of Eratosthenes algorithm is my current project. By inputting a maximum value for the sieve, the algorithm generates primes below that value and stores them in a C-style array. Issue: Everything functions correctl ...

Angular 2 Material 2: Nifty Collapsible Sidebar

I am currently working on building a sidebar navigation using Angular 2 and Material 2, When in the Open State, it appears as shown below, https://i.sstatic.net/FFGmz.png However, in the Closed state, the entire sidebar hides. I would like only the menu ...

Exploring the seamless integration of Worldpay with Angular 2

I am in the process of incorporating Worldpay into my angular2 application. Utilizing the own form (own-form) approach, it is essential to include their script on the page: <script src="https://cdn.worldpay.com/v1/worldpay.js"></script> Addin ...

Is there a way for me to set a variable in my component with a value from the Angular Material autocomplete feature?

I am currently in the process of constructing a form to generate a POST request to the API. I have opted to utilize Angular Material 4 and incorporate the Autocomplete component provided by Material Design. Below is the code snippet displaying my HTML Com ...

Loading children routes using NgRx

In my Angular 9 app, I am facing a challenge where I need to dynamically load a specific module only when a certain property in my app state (ngrx) is not null. Currently, I have an AuthGuard set up in my routes using canActivate. My goal is to load the & ...

Svelte user interface fails to update correctly after editing a writable array type

Currently, I am working on developing a crew creator tool for a rowing club to provide some context. The Writable container that holds the array is defined as follows import { writable, Writable } from 'svelte/store'; import type { CrewMember } ...

Updating and excluding values in JSON using NodeJS

var data = [{ "description" : "sample", "link" : "mylink", "id" :"1", "deviceName":"mydevice1" }, { "description" : "sample", "link" : "mylink", "id" :"1", "deviceName":"mydevice1" }, { "description" : "sample", "link" : "myli ...

The browser is failing to display the updated value

I am dealing with a particular situation: airline = 'string'; Within my template, I include the following: <p>{{airline}}</p> As expected, this displays string in the browser. In addition, there is a function that plays a role: ...

The browser is initiating an HTTP request upon refreshing a webpage built with Angular

Hey there, currently I'm working on an Angular project that involves making API calls. I have the API URL set up as: const SERVER_URL = https://api.example.com Everything works smoothly until I reload the page after some successful API calls and th ...

Angular7 and above: Use *ngFor directive to display X number of items in each row- a highly

After diving into Angular for my projects a few months back, I've encountered a situation that requires some guidance. Utilizing Bootstrap4, I'm facing the challenge of creating rows for every 3 items stored in an array. Since the size of the ar ...

PrimeNg style in Angular 2 is not being applied

After following the instructions to install primeng by executing npm install primeng --save and importing necessary modules in the app.module.ts file, such as: import {CheckboxModule} from 'primeng/primeng'; ... imports: [ CheckboxModule ...

Pass data stored in a PHP array from a PHP file to a JavaScript array in a JS file

I am currently working on passing an array ($phpArray) from a PHP file to a function in a JS file (data.js). I'm having trouble figuring out the right approach. Any ideas? dataInput.php (PHP File) <?PHP $phpArray=[[1,2,3,4,5], [2,3,5,6 ...

Is there a way to retrieve a compilation of custom directives that have been implemented on the Vue 3 component?

Is there a way to retrieve the list of custom directives applied to a component? When using the getCurrentInstance method, the directives property is null for the current component. I was expecting to see 'highlight' listed. How can I access the ...

Is it possible to include an anchor tag within an input string and have it displayed in a label?

I have created a unique class for checkboxes, where the label and input are specified along with their respective classes. In another class, I am utilizing this custom component and need to pass a label that includes a link. For example: Please accept the ...

Looping through a detailed JSON array filled with objects to extract just a pair of items is essential. I aim to achieve this efficiently by utilizing LOD

Looking at this intricate JSON object... Here's a snippet of the code: entity: [{entityName: "Nrm", page: 0, pageSize: 241, status: "successfully perfrom: select Operation",…}] 0: {entityName: "Nrm", page: 0, p ...