I am getting a response with the format below. But I cannot loop the data object that is getting returned. Can anyone help me with how to loop the data objects?
{
"blogs": {
"current_page": 1,
"data": [
{
"id": 23,
"category_id": 2,
"title": "xxx",
"heading": "qqq",
"short_desc": null,
"sku": "www",
"description": "<p>ddd</p>",
"video_link": null,
"mainimage": "1660416004_IMG_20210125_214234574.jpg",
"meta_image": "1660416004_IMG_20210125_214234574.jpg",
"is_active": "Y",
"is_popular": "Y",
"is_featured": "Y",
"is_recent": "Y",
"meta_keywords": "sdd",
"meta_description": "qqq",
"twitter_site": null,
"twitter_card": null,
"twitter_creator": null,
"canonical_link": null,
"created_at": "2022-08-13T18:40:05.000000Z",
"updated_at": "2022-08-13T18:40:05.000000Z",
"category": {
"id": 2,
"name": "Food & Health",
"name_bengali": "ddd",
"sku": "dddd",
"is_active": "Y",
"title": "fff.",
"canonical_link": "vvv",
"keywords": "ff",
"meta_description": "eee",
"twitter_site": "ccc",
"twitter_card": "ddd",
"twitter_creator": "dd",
"created_at": "2022-07-23T16:47:36.000000Z",
"updated_at": "2022-08-01T18:16:25.000000Z"
}
},
{
"id": 29,
"category_id": 2,
"title": "xxx",
"heading": "qqq",
"short_desc": null,
"sku": "www",
"description": "<p>ddd</p>",
"video_link": null,
"mainimage": "1660416004_IMG_20210125_214234574.jpg",
"meta_image": "1660416004_IMG_20210125_214234574.jpg",
"is_active": "Y",
"is_popular": "Y",
"is_featured": "Y",
"is_recent": "Y",
"meta_keywords": "sdd",
"meta_description": "qqq",
"twitter_site": null,
"twitter_card": null,
"twitter_creator": null,
"canonical_link": null,
"created_at": "2022-08-13T18:40:05.000000Z",
"updated_at": "2022-08-13T18:40:05.000000Z",
"category": {
"id": 2,
"name": "Food & Health",
"name_bengali": "ddd",
"sku": "dddd",
"is_active": "Y",
"title": "fff.",
"canonical_link": "vvv",
"keywords": "ff",
"meta_description": "eee",
"twitter_site": "ccc",
"twitter_card": "ddd",
"twitter_creator": "dd",
"created_at": "2022-07-23T16:47:36.000000Z",
"updated_at": "2022-08-01T18:16:25.000000Z"
}
}
}
This is the html where I am trying to loop through:
<div class="post-item border" *ngFor="let blog of allBlogs">
<p><!-- here will appear the blog title --></p>
<p><!-- here will appear the blog heading--></p>
<p><!-- here will appear the blog description--></p>
</div>
In the component.ts file I am writing the below code.
ngOnInit(): void {
this.blogservice.getHomeBlogs().
subscribe(data => {
this.allBlogs = data;
console.log('data', data);
}
);
}
I am getting the response but I cannot loop through each element.
Also I created a ts file as below:
export interface Blogtype{
blogs: []
}
This is the service file I have created below:
getHomeBlogs(): Observable<Blogtype[]>{
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Origin','*');
return this.http.get<Blogtype[]>(this.url, {'headers': headers});
}
>Solution :
if this json is what is returned in getHomeBlogs() – so you only need to map to inner data array – this.allBlogs = data.blogs.data
and change the signature of the function to Observable<{blogs: {data: Blogtype[] } }>