I have encountered an issue while trying to display data from an API in the 'home.component.html'. Although my 'home.component.ts' successfully fetches the data from the service, I'm facing difficulty rendering it in 'home.component.html'. It seems like I might be handling the data incorrectly.
The error message I receive is: Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed.
Here is a snippet of 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 here is an excerpt from my 'home.component.ts':
import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
@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;
}
})
}
}
The error displayed in the browser console:
https://i.sstatic.net/MOFHZ.png
This is the structure of the JSON data returned by the API response, containing an array named 'data' with three objects:
{
"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
}
}
}
Finally, 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);
})
);
}
}