Combining multiple arrays in angular 11: A step-by-step guide

I am facing an issue with two arrays received from a URL in Angular. I am attempting to combine the two arrays into a single array.

"admin":[
{
"Name":"John",
"Age":34
},
{
"Name:"Joe",
"Age":56
}
],
"users":[
{
"Name":"John",
"Age":34
},
{
"Name:"Joe",
"Age":56
}
]

I have tried to merge the two arrays using:

public newArr=[];
join(){
this.newArr=this.newArray.concat(this.admin,this.users)
console.log(this.this.newArr.length);
//the result shown in the console is 0
}

I also attempted another method:

join(){
this.newArr.push(...this.users,...this.admins)
console.log(this.newArr.length)
//the results is still 0
}

I am seeking guidance on the correct approach for this issue.

Answer №1

utilize The concept of destructuring assignment . for additional information, refer to this page here

let newArray = [...this.admin, ...this.users];

Answer №2

let newArray = [];
combineArrays() {
  this.newArray = this.adminUsers.concat(this.customers)
  console.log(this.newArray.length);
}

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 is the best way to organize inputs in a column? I have included a reference below to show my desired layout

<mat-form-field appearance="standard"> <mat-label>Full Name *</mat-label> <input matInput [(ngModel)]="currentUser.fullName"> </mat-form-field> <mat-form-field appearance="standard"&g ...

What could be causing a compile error in my React and TypeScript application?

I recently downloaded an app (which works in the sandbox) from this link: https://codesandbox.io/s/wbkd-react-flow-forked-78hxw4 However, when I try to run it locally using: npm install followed by: npm start I encounter the following error message: T ...

Unable to establish a connection to 'X' as it is not recognized as a valid property

Trying to implement a Tinder-like swiping feature in my Angular project, but encountering an error stating that the property parentSubject is not recognized within my card component. Despite using the @Input() annotation for the property, it still fails to ...

I often find myself frustrated while using Next.js because the console automatically clears itself, making it difficult for me

I am facing an issue with my form in the Next.js app. Here is how it is defined: <form onSubmit = { async() => await getCertificate(id) .then(resp => resp.json()) .then(data => console.log(data)) }> Whenever there is an erro ...

Choosing between map and switchMap in RxJS can impact the outcome of

I've been diving into the documentation for both switchMap and map, but I'm struggling to grasp the distinction between the two. Can someone please explain any scenarios where their usage is interchangeable? ...

Is it possible that using npm link could be the root cause of the "module not

As I delve into understanding how to utilize TypeScript modules in plain JavaScript projects, it appears that I am facing a limitation when it comes to using npm linked modules. Specifically, I can successfully use a module that is npm-linked, such as &apo ...

Using Angular to store checkbox values in an array

I'm currently developing a feature that involves generating checkboxes for each input based on the number of passengers. My goal is to capture and associate the value of each checkbox with the corresponding input. Ultimately, I aim to store these valu ...

Deploying angular rendered application on a shared server

After developing an Angular 7 app and implementing Angular universal for SEO purposes, it has come to my attention that deploying it on a shared server is not possible due to the requirement of Node.JS to run the script file. My hosting plan restricts the ...

Stepping up the Angular AuthGuard game: Harnessing CanMatchFn and CanActivateFn for ultimate security (Class Guards make way for Functional Guards)

I have developed an Angular AuthGuard component as shown below: @Injectable({ providedIn: 'root', }) export class AuthGuard implements CanActivate, CanLoad { constructor(private authService: AuthService, private router: Router) {} ca ...

Enhance your TypeScript arrays using custom object equality functions

I am looking to utilize array functions such as contains and unique, but I want them to compare equality using my custom equals function. For instance: let arr = [{id:1,..//some more},{id:2,..//some more},{id:3,..//some more}] I need the following code ...

Discover the power of Angular CLI by learning how to execute various commands, including running 'ng add --help

Issue: A fatal error occurred: Could not find the designated project file at the specified directory. Please refer to "C:\Users\KELVIN~1\AppData\Local\Temp\ng-f6Wqh8\angular-errors.log" for more information. ...

Using Jest and Typescript to mock a constant within a function

Just getting started with Jest and have a question: Let's say I have a function that includes a const set to a specific type (newArtist): export class myTestClass { async map(document: string) { const artist: newArtist = document.metadat ...

The type 'HttpEvent<MovieResponse>' does not contain a property named 'results'. This is causing a TypeScript Error

I'm currently integrating the TMDB trending movies endpoint into my Angular 18 application and storing the data in a variable. Here is a snippet of the code: private trendingMovies$ = this.http.get<MovieResponse>(${this.apiUrl}trending/movie/da ...

Determine the category of a nested key within a different type

I'm currently utilizing graphql-codegen which generates types in the following structure: type Price = { onetime: number; monthtly: number; }; type CarModel = { price: Price; name: string; }; type Car = { model: CarModel; someOtherAttri ...

Erase the destination pin on Google Maps

I am currently working on a project that involves displaying hit markers on google maps along with a route from start to finish. Although I have successfully displayed the route, I encountered an issue where both the origin and destination have identical ...

Tips for accurately defining the return type for querySelector(All) connections

I enjoy doing this particular task, ensuring the types are correct. const qs = document.querySelector.bind(document) as HTMLElementTagNameMap | null; const qsa = document.querySelectorAll.bind(document) as NodeListOf<any>; While hovering over query ...

Is there a workaround for utilizing a custom hook within the useEffect function?

I have a custom hook named Api that handles fetching data from my API and managing auth tokens. In my Main app, there are various ways the state variable "postId" can be updated. Whenever it changes, I want the Api to fetch new content for that specific p ...

Implementing Authorization Headers in Angular for Secure HTTP Post Requests

I have been struggling to add Authorization Headers to a Post request after extensive research and trying various ways of adding headers to the request. I need to authenticate the post request of my Angular app to a Django server. headers2 = { "Conte ...

Troubleshooting the "Cannot read properties of undefined" error in Angular 11 while managing API data

When attempting to retrieve data from an API and store it in an object (model) for logging in the console, it consistently returns undefined. The same issue occurs when attempting to use the data in HTML with databinding, resulting in undefined values as w ...

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...