table not iterating over data, data is in the array (shows in browser console). What's wrong with my html?

Question

<tr *ngFor="let animal of readAnimal">
        <th scope="row">{{ animal.id }}</th>
        <td>{{ animal.name }}</td>
        <td>{{ animal.description }}</td>
        <td>{{ animal.created_At }}</td>
        <td>{{ animal.updated_At }}</td>
      </tr>

that's a small piece of my html, it's a table.


this is my component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ApiServiceService } from '../api-service.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css'],
})
export class CreateComponent implements OnInit {
  constructor(private api: ApiServiceService, private router: ActivatedRoute) {}

  readAnimal: any;
  errMsg: any;
  successMsg: any;
  getparamid: any;

  getAlldata() {
    console.log('inside getAlldata()');
    this.api
      .getAllAnimals()
      .then((res: any) => {
        console.log('this is res data', res);
        this.readAnimal = res; // Assuming res is an array of animals
        console.log('Data output:', this.readAnimal);
      })
      .catch((error: any) => {
        console.error('Error fetching all animals:', error);
      });
  }


my browser data output:

Data output:

{message: 'All animal data', data: Array(11)}data: Array(11)

0: {id: 1, name: 'cassius', description: 'good boy', created_At: '2024-06-21T00:21:34.000Z', updated_At: '2024-06-21T02:19:55.000Z'}

1:{id: 2, name: 'Cat', description: 'moose', created_At: '2024-06-21T00:22:38.000Z', updated_At: '2024-06-21T00:51:44.000Z'}

2:{id: 3, name: 'Bald Eagle', description: 'The symbol of America', created_At: '2024-06-19T21:57:20.000Z', updated_At: '2024-06-21T00:19:56.000Z'}

3:{id: 4, name: 'Snake', description: 'A reptile that slithers on the ground.', created_At: '2024-06-19T21:57:20.000Z', updated_At: '2024-06-19T21:57:20.000Z'}

4: {id: 5, name: 'Fish', description: 'A creature that lives in the water.', created_At: '2024-06-19T21:57:20.000Z', updated_At: '2024-06-19T21:57:20.000Z'}created_At: "2024-06-19T21:57:20.000Z"description: "A creature that lives in the water."id: 5name: "Fish"updated_At: "2024-06-19T21:57:20.000Z"\[\[Prototype\]\]:

etc...

if it's outputting, why isn't the html reading it?

it worked for my server side code in angular, but now i'm redoing it so it's client side. I feel like it has something to do with that, why the client side frontend isn't grabbing from the backend data being shot back. Whereas in my server based app it built it all together first before spitting it back out. Very frustrating

Answer 1

The array exists inside the data property. So you need to access that. Arrays are iterable on *ngFor

  getAlldata() {
    console.log('inside getAlldata()');
    this.api
      .getAllAnimals()
      .then((res: any) => {
        console.log('this is res data', res);
        this.readAnimal = res.data; // <- changed here!
        console.log('Data output:', this.readAnimal);
      })
      .catch((error: any) => {
        console.error('Error fetching all animals:', error);
      });
  }