How to iterate through array of array in angular

Question

I have the following data set and I want to access the x and y values of every single set. how can I get access x and y values ?

Answer 1

The solution is very simple, you have to iterate the first array, each entry of this is another array so you have to iterate it too.

 for(const items of firstArray)  {
      for(const object of items) {
        console.log(object.x);
        console.log(object.y);
      }
    
    }

This solution is better to one that use forEach in terms of performance. https://betterprogramming.pub/should-you-stop-using-foreach-in-your-javascript-code-efe1e86c78e5

Answer 2

You can use any iterators to traverse through the array.

array.forEach(item => 
           item.forEach(
             sub => console.log(sub.x,sub.y)
           ));

Answer 3

You can access the values of nested arrays in angular by using nested ngFor loops. It can be achieved by this.

 <div *ngFor="let item of Array1;let i = index" >                         
     <div *ngFor="let subItem of item[i]"> 
          <p>{{subItem.x}}</p> 
          <p>{{subItem.y}}</p> 
     </div>                             
 </div>