angular 5 *ngFor two array (merge objects of two arrays to make single array of objects) - arrays

Question

I am getting array from two get method in angular 5. What i want is to combine those two arrays (JSON) into one array and print it in a single for loop
my two arrays:-
servers3 =[
{
sub:'sub',
subDesc:'subDesc'
}];
public tableData:any;
i am using concat two combine two arrays like follows
<table>
<tr>
<th>fileName</th>
<th>icon</th>
<th>fullPath</th>
<th>sub</th>
<th>subDesc</th>
<th>image</th>
</tr>
<tr *ngFor="let item of tableData.concat(servers3)">
<td>{{item?.fileName}}</td>
<td>{{item?.icon}} </td>
<td>{{item?.fullPath}}</td>
<td>{{item?.sub}}</td>
<td>{{item?.subDesc}}</td>
<td><img src="{{item?.fullPath}}" width="200px" height="200px" alt="adawdawd"/></td>
</tr>
</table>
</div>
And i am getting output as follows:-
as you can see its not showing in one line
each array completes individually
please give me solution if any one know the answer
thank you in advance

Answer 1

You can use following keeping in mind that length of both the arrays should be same otherwise it will generate error.
this.tableData.map((item, index) => {
return Object.assign(item, servers3[index]));
});
HTML
...
<tr *ngFor="let item of tableData">
...