My Project: In my Angular SPA, I am trying to retrieve data from Firebase and display specific values on the screen.
Approach Taken: The data returned from Firebase looks like this: Returned Data from Firebase
Error Encountered:
In order to display the data, I used an *NgFor loop in the HTML section of the component as shown below:
<div class="row">
<ul class="list-group" *ngFor = "let guardian of guardians">
<li class="list-group-item">{{ guardian.firstname }}</li>
</ul>
</div>
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed.
I have searched for solutions to resolve this error, and it is suggested to transform the received data into an array. Despite my attempt to do so with the following code:
for (const guardian in data) {array.push(guardian);}
The resulting array is missing all the values I need. It appears in this format:
["-L3n95t-rxA4-bOgc8fz", "-L3nF0h5EEKtwAiZv0Q7",
"-L3oWoBmoXK3-5XBkx9i", "-L3oWxEhAcUGQX2P4yES", "-L41_cK3KD6DMduhG3P3",
"-L4CbTtNqGuVyT3hzY-R", "-L4CfKsBxfQxSKd2PR4s", "-L4EDFkbsWMrT61fLjhD"]
Although this allows me to use the *NgFor statement, the transformed data is not useful to me at this point. Any insights on how I can properly manipulate this data?
After struggling with this issue for three days, any assistance or guidance would be greatly appreciated! :)