I used lodash to group a data array and successfully viewed the output in my console. However, I'm encountering an issue where my *ngFor loops are not displaying the data on my HTML page. Can anyone help me figure out what I might be missing?
In my app.component.ts file:
export class AppComponent {
name = "Angular";
// Data array
data = [
{
customer: {
name: "John"
},
transaction_date: "2017-04-18"
},
{
customer: {
name: "Dick"
},
transaction_date: "2017-06-30"
},
{
customer: {
name: "Harry"
},
transaction_date: "2017-04-03"
},
{
customer: {
name: "John"
},
transaction_date: "2017-05-03"
}
];
constructor() {}
ngOnInit() {
// Sorting by Month
// Formatting month
const monthName = item =>
moment(item.transaction_date, "YYYY-MM-DD").format("MMM");
// Grouping by month
const byMonth = _.chain(this.data)
.groupBy(monthName)
.mapValues(items => _.map(items, "customer.name"))
.value();
console.log(byMonth);
return byMonth;
// Sorting by Day
const dayName = item =>
moment(item.transaction_date, "YYYY-MM-DD").format("DD");
// Grouping by Day
const byDay = _.chain(this.data)
.groupBy(dayName)
.mapValues(items => _.map(items, "customer.name"))
.value();
console.log(byDay);
return byDay;
}
}
In my app.component.html file:
<table *ngFor="let month of months">
<tr>
<th>{{month.month}}</th>
</tr>
<tr>
<td>
<table *ngFor="let customer of customers">
<tr>
<td>
{{customer.name}}
</td>
</tr>
</table>
</td>
</tr>
</table>
Desired Format (within a table - formatting may not display):
- April
- John
- Harry
- May
- Dick
- June
- John
Thank you for any assistance you can provide!