How to wrap the json response using loop in Angular 14?-CodePudding

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  *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});
      }

CodePudding user response：

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[] } }>

CodePudding user response：

Hello have you tried this?

this.allBlogs = this.blogs.data;

Also, there is more than one object in the data. You may need to return them separately. Good luck with