CODEWITHSUNDEEP
javascriptangular
Dharmesh
Dharmesh

Reputation: 6013

how to push array in array in angular?

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

enter image description here

result that i want to push result

enter image description here

after pushing console is like this

enter image description here

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>

Upvotes: 0

Views: 33859

Answers (5)

Viraj_Zanda
Viraj_Zanda

Reputation: 101

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

Upvotes: 4

Prashant Pimpale
Prashant Pimpale

Reputation: 10717

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

Upvotes: 1

Marcus Hert da Coregio
Marcus Hert da Coregio

Reputation: 6308

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]);
}

Upvotes: 3

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

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>

Upvotes: 1

Topher
Topher

Reputation: 1029

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]);
    }
  } 
});

Upvotes: 1

Related Questions