how to push array in array in angular?

Question

Here I put all consoles and code below. I want to push array inside array, ex. in imagesArray has 3 arrays and now I push result array which has 2 arrays so first array is pushed properly in imagesArray but last array shows undefined and not pushed and gives error like imageArray undefined so how to push that? (I put consoles and codes below)

Before push object consoleimagesArray

result that i want to push result

after pushing console is like this

add-folder.component.ts

imagesArray : UploadedImages[] = [];

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 1; i <= result.length ; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

add-folder.component.html

<div>
  <mat-card *ngFor="let images of imagesArray" style="height : 100px;width : 100px">
    <b>{{images.imageName}}</b> 
    <b>{{images.filesize}}</b>
  </mat-card>
</div>

Answer 1

This is the most recent updated way to push an array into an array in typescript. You can use spread operator to extend an array by easily

array1: [...array1, ...array2]

This will extend the array1 and add elements in the array2 into the array1.

You can find more about this in - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 2

In this code

imagesArray : UploadedImages[] = [];

dialogRef.afterClosed().subscribe(result => {
    if(result != '' && result != undefined && result != null){
         for(var i = 1; i <= result.length ; i++){
             this.imagesArray.push(result[i]);
         }
    } 
});

You're starting the array from the position 1. Arrays starts at 0. So, you have 2 elements in your array, [element1, element2]. Your code first will get the position number 1 (element2), and insert on the other array.

And, the next iteration, i will be equals 2, which is equals to result.length, this.imagesArray.push(result[i]); will try to get the position 2, which don't exists, and push undefined into the imagesArray.

Change your code to:

for(var i = 0; i < result.length ; i++){
    this.imagesArray.push(result[i]);
}

Answer 3

The length of List will return 2 and the index of an array starts from 0 so the result.length - 1.

So you can do like this:

Change:

var i = 0; // Start from zero because arrays are starts from `0` so we can access the first item as list[0]

And

result.length - 1; // Subtract 1 from length of list

Code after applying the change:

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i <= result.length - 1; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

You can do this without subtracting the -1 from the length, just change the condition parameter to i < result.length as:

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i < result.length; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

StackBlitz Example

Answer 4

You're initializing your loop variable, i, to 1, result should have a 0 based index, meaning that you should make i = 0, and use less than (<) instead of less than or equal (<=)

That's why you're getting undefined as the last object added to the array

imagesArray : UploadedImages[] = [];

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i < result.length ; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

Answer 5

There is a undefined value in your array after pushing all values. set array empty in each subscribe and then push to avoid null values.

dialogRef.afterClosed().subscribe(result => {
  this.imagesArray = [];
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i <= result.length ; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

Also use the optional operator to double check whether the array element is not undefinec.

<b>{{images?.imageName}}</b> 
<b>{{images?.filesize}}</b>