After trying to iterate over this dataset within my HTML, I attempted a nested ngfor, but unfortunately encountered an error.
My attempt involved iterating the object twice with a nested ngfor, resulting in the following error:
HabitRecordsComponent.html:8 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Below is the data object in question:
{
"Sat Jan 05 2019": [
{
"completed1": true,
"frequency": [
7,
6,
2,
1
],
"description": "Walk 100km",
"color": "#E97825",
"task_id": "00397030-182d-11e9-957b-79c872c75fe1"
},
// More data entries here...
]
Displayed below is the snippet from my HTML code:
<div class="records-calendar">
<div class="records-container" *ngFor="let formattedHabit of formattedHabits"></div>
<div class="" *ngFor="let habit of formattedHabit"></div>
</div>
And here is the relevant TypeScript component code:
import { Component, OnInit, Input, } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import * as moment from 'moment';
// Rest of the TypeScript code here...