如何从api渲染Angular中的数据

Question

I am trying to render data from an api in the 'home.component.html', but I get an error in the browser console. The 'home.component.ts' is fetching the data correctly from my service, but I can´t manage to render it in 'home.component.html'. I may be calling it the wrong way.

The error I get is: Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed.

This is my 'home.component.html':

<div class="wrapper">
    <mat-card class="example-card" *ngFor="let data of datas; index as i">

        <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>{{ data.attributes.name }}</mat-card-title>
            <mat-card-subtitle>{{ data.attributes.publishedAt | date:'medium' }}</mat-card-subtitle>
        </mat-card-header>
        
        <img mat-card-image [src]="data.attributes.image.data.attributes.url" alt="meme">

    </mat-card>
</div>

And this is my 'home.component.ts':

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';

// import { Meme } from 'src/app/util/interfaces';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {


  datas:any=[];
  errores:string="";
  totalLength:any;

  constructor(private data: DataService) { 
  }

  ngOnInit(): void {

    this.data.getMemes().subscribe(res=>{

     const myJSON = JSON.stringify(res); 
  
     this.datas = myJSON;

     this.totalLength = res.length;

    }, error =>{
      console.log(error);
        if(error.status == 0){
            this.errores="Código del error: "+error.status+" \n Ha ocurrido un error del lado del cliente o un error de red.";
        }else{
            this.errores="Código del error: "+error.status+"\n\n"+error.statusText;
        }
    })  

  }

}

This is the Browser console Error:

This is the JSON data from the api response, As you can see there is an array called 'data' with three objects inside:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "black",
        "createdAt": "2023-01-17T19:18:29.362Z",
        "updatedAt": "2023-01-17T19:50:47.247Z",
        "publishedAt": "2023-01-17T19:37:56.037Z"
      }
    },
    {
      "id": 2,
      "attributes": {
        "name": "jennie",
        "createdAt": "2023-01-17T19:49:28.235Z",
        "updatedAt": "2023-01-17T19:51:07.573Z",
        "publishedAt": "2023-01-17T19:49:33.399Z"
      }
    },
    {
      "id": 3,
      "attributes": {
        "name": "pink",
        "createdAt": "2023-01-17T19:50:31.818Z",
        "updatedAt": "2023-01-17T19:50:56.444Z",
        "publishedAt": "2023-01-17T19:50:32.786Z"
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 3
    }
  }
}

And this is my 'data.service.ts':

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { environment } from 'src/environments/environment.prod';



@Injectable({
  providedIn: 'root'
})
export class DataService {

  REST_API: string ='http://localhost:1337/api/memes';

  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(
    private http: HttpClient
  ) {  }

  getMemes():Observable<any> {

    let API=this.REST_API;
    return this.http.get(API,{headers:this.httpHeaders}).pipe(
      map((data:any) => { 
        return data;
      }), catchError( error => {
        return throwError(error);
      })
    );

  }



}

Answer 1

why are you trying to pass stringified json to an array object:

const myJSON = JSON.stringify(res);
this.datas = myJSON;

you don't need to stringify "res" object, pass res.data directly:

this.datas = res.data;

and note that your res object doesn't have "length" property:

this.totalLength = res.length

you can do this:

this.totalLength = res.meta.pagination.total:

and there is an invalid property call in your html view,there isn't image property in data.attributes:

<img mat-card-image [src]="data.attributes.image.data.attributes.url" alt="meme">