How to Create a Nested Array from 2 Tables in Angular

I have 2 tables that I need to display in the following manner: I'm populating 2 different arrays

storeTableData: any=[];
employeeTableData: any=[];


The storeTableData has the following fields: StoreID, Name, Address
The employeeTableData has the following fields: StoredID, Name, Role

I'm not sure if I have to turn my data into an array like this first (and if so, how?):

Store[] = [
{
StoreID: "1",
Store: "Staples",
address: "123 Main Street, San Diego CA 12345",
employees: [
{
StoreID: "1",
Name: "John Doe",
Role: "Manager"
},
{
StoreID: "1",
Name: "John Smith",
Role: "Cashier"
},
{
StoreID: "1",
Name: "Jane Doe",
Role: "Shipping"
},
},
{
StoreID: "2",
Store: "Best Buy",
address: "456 Main Street, San Diego CA 12345",
employees: [
{
StoreID: "2",
Name: "John Smith",
Role: "Manager"
},
{
StoreID: "2",
Name: "Jane Doe",
Role: "Cashier"
},
{
StoreID: "2",
Name: "John Doe",
Role: "Shipping"
},
},
]


Or is there a way I can just do it via a nested ngif in the html or is there some other way?

Continue reading...