[SOLVED] How to add object values from an array of multiple objects into an array readable for ngFor?

How to add object values from an array of multiple objects into an array readable for ngFor?

I get an array like this:

obj_Array = [{"Information":{ID: 1, Name: "Frank"}},"Route":{Direction: "north", Time: 10:50:24},"Music":{volume: "loud", input: "3.5mm"}];

I need to take the object values from Information, Route, and Music: 1, Frank, north, 10:50:24 etc... And save them into an array that is readable for Angular front-end ngFor. So I can print the values to the screen using Angular Material Table.

Currently says the array is an object and cannot iterate through it. But when I do .isArray() it prints true.

I want an end product like the below Array:

String_Array = ["1","Frank","north","10:50:24","loud","3.5mm"];

This now should be easily read by ngFor for it to be displayed.

Solution

A material table generally show an array of objects, not an array of strings. Well, really you can display an array of string in the way

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <!--you use element[0], element[1], element[2]... -->
    <td mat-cell *matCellDef="let element"> {{element[0]}} </td>
  </ng-container>

But... how about?

  arrayDisplay=obj_Array.map((x:any)=>
       ({...x.Information,...x.Route,...x.Music}))

This return an array of object in the way

   [{ID: 1, Name: "Frank",Direction: "north", 
     Time: "10:50:24",volume: "loud", input: "3.5mm"}]

And you use the "clasic"

  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
  </ng-container>
  <ng-container matColumnDef="NAme">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.Name}} </td>
  </ng-container>
  ...

NOTE: the array_obj in the question is bad formatted