Creating an array in Angular/TypeScript that contains another array and a variable

I hate to admit it, but I found myself struggling with a simple task the other day - creating an array.

Let me explain my dilemma.

I am trying to populate an array in the following format:

fatherArray=[
  { 
    tagName: '',
    list:[]  
  }
]

The problem is, I can't use fatherArray.push() without having the object already set up. I have multiple tags and lists, and for instance, I need to check if someone on the list is related to rock music, and then update the tag with 'rock' and create a list of those individuals. ( I've already achieved this, now I just need to populate the array as shown below )

So, how can I populate this array? I want it to look something like this:

fatherArray=[
  { 
    tagName: 'rock',
    list:['iron','metallica',... ]  
  },
  { 
    tagName: 'pop',
    list:['madona','britney']  
  },
  { 
    tagName: 'hip hop',
    list:['travis','lild',... ]  
  },
  { 
    tagName: 'bla bla bla',
    list:['bla', 'bla', 'bla', 'bla']  
  }
]

Answer №1

Have you given these steps a shot?

let updatedArray: string[] = ['silver','megadeth','etc'];

parentArray.forEach(element => { 
  if (element.tagName === 'metal') {
    element.list = element.list.concat(updatedArray);
  }
}

In order to fill the inner array, you must first gain access to it

Moreover, if you wish to add the object to the parentArray, you can achieve it like this

let newObj: any = {
  tagName: 'metal',
  list: ['silver','megadeth','etc'],
};

parentArray.push(newObj);

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

Checkbox with an indeterminate state in Angular

I'm currently working on updating an AngularJS (1.5) setup where a parent checkbox becomes indeterminate if one of its children is selected, and all the children are selected if the parent is selected. My main challenge lies in converting the old ES5 ...

Nested Angular click events triggering within each other

In my page layout, I have set up the following configuration. https://i.stack.imgur.com/t7Mx4.png When I select the main box of a division, it becomes highlighted, and the related department and teams are updated in the tabs on the right. However, I also ...

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

Establish a connection between an Angular Docker container and an Asp.Net container

A program was developed with three main components: a database (MS SQL Server), backend (Asp.Net Core), and frontend (Angular 8). The program is run using docker-compose: services: sqlserver: image: mcr.microsoft.com/mssql/server:2019-latest ...

Transforming std::vector into a char* pointer

Currently, I am a C++ student who is undertaking a project that involves receiving and encoding a message using a simple cipher. The process begins by accepting each word as a string, converting it into a vector of characters, modifying each character, and ...

The directive for angular digits only may still permit certain characters to be entered

During my exploration of implementing a digits-only directive, I came across a solution similar to my own on the internet: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appOnlyDigits]' ...

Learn the process of uploading files with the combination of Angular 2+, Express, and Node.js

Need help with uploading an image using Angular 4, Node, and Express with the Multer library. Check out my route.js file below: const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, 'uploads') }, filename: fun ...

What is the proper way to supply a header parameter in Angular?

Encountering difficulties when trying to pass my header parameter in Angular. The error I'm receiving from my API states "Session Id is required" as shown below. Here is the endpoint: [HttpDelete("")] public IActionResult EndSession( ...

Is it possible for the *ngIf directive to stop unauthorized users from accessing my admin page through their browsers?

When the *ngIf directive is set to false, a certain element or component will not be included in the DOM. For example, let's say there is a component that displays admin tools and should only be accessible to authorized users (administrators). Will se ...

Order JSON array based on the time, extract the pairs of keys and values, and transfer them to a Google

My goal is to extract the most recent entry from a JSON array stored in a Google Sheet and copy it into two adjacent columns. The desired data resides in Column L of my spreadsheet (starting from row 2) and follows this format: [{"id": "XX:123456", "time ...

"Utilizing the `useState` function within a `Pressable

Experiencing some unusual behavior that I can't quite figure out. I have a basic form with a submit button, and as I type into the input boxes, I can see the state updating correctly. However, when I click the button, it seems to come out as reset. Th ...

Is there a way to seamlessly share TypeScript types between my Node.js/Express server and Vite-React frontend during deployment?

I'm currently tackling a project that involves a Node.js/Express backend and a Vite-React frontend. My goal is to efficiently share TypeScript types between the two. How should I configure my project and build process to achieve this seamless type sha ...

Ag-Grid is displaying a third column that is not present in my dataset

Recently, I've been working with Angular and incorporating the Ag-Grid into my project. My goal is to display a grid with two columns; however, upon implementation, an unexpected third separator appears as if there are three columns in total. https: ...

Struggling to capture the error thrown by the subscribe method in Angular using RxJs

In following the most recent tutorial, I learned about using pipe, tap, and catchError to intercept the result. This is what I currently have: getStatus(): Observable<boolean> { return this.http.get<boolean>('/status').pipe( ...

Angular routing is failing to redirect properly

After creating a sample Angular app, the goal is to be redirected to another page using the browser URL http://localhost:1800/demo. The index.html file looks like this: <!doctype html> <html lang="en"> <head> <title>Sample Ang ...

The Angular Spring Boot Assembly Problem Leading to a Whitelabel Error

I am currently working on a project that uses Spring Boot as the backend and Angular as the frontend. My packaging process involves building the Angular project and then copying the contents into the Spring Boot resource folder. In my Spring Boot Controlle ...

Word with the Most Points

I have created a code to determine the highest scoring word as a string, however when I calculate all words and attempt to display the results, I am encountering an issue where all results are showing as: NaN function high(x) { var words = x.split(&ap ...

Querying the api for data using Angular when paginating the table

Currently, I have a table that retrieves data from an API URL, and the data is paginated by default on the server. My goal is to fetch new data when clicking on pages 2, 3, etc., returning the corresponding page's data from the server. I am using an ...

After installing Highcharts, an error occurs stating 'Highcarts is not defined'

I am trying to incorporate Highcharts into an Angular 5 project using the ng2-highcharts npm package. However, I keep encountering an error stating that 'highcharts is not defined'. In my Angular 5 project, I have integrated Highcharts and utili ...

Issues with Ajax calls in IOS on Ionic Cordova, functioning properly on Android

After meticulously following the instructions provided on this website, I successfully got my app to work flawlessly on Android and in my Chrome browser using the Ionic server. However, I encountered issues when testing it on an iOS emulator or my actual i ...