Get Data Object From Array On Angular

Issue

I have data retrieved from the API in the following form

[
    {
        "end_date": 1640908800000,
        "rev": 151,
        "usage_limit": 0,
        "reason_deleted": null,
        "picture_detail": "test",
        "revtype": 0,
        "linked_type": "SPECIFIC",
        "modified_date": 1644893309181,
        "type": "OPEN",
        "created_by": "januardy.hp@gmail.com",
        "is_multiple": null,
        "campaign_name": "Blewah 2022",
        "is_deleted": false,
        "is_auto_apply": true,
        "modified_by": "januardy.hp@gmail.com",
        "campaign_code": "BLEWAH2",
        "id": 76,
        "created_date": 1644893309181,
        "picture_banner": "test",
        "remarks": "Lorem ipsum dolor sit amet.",
        "start_date": 1609459200000,
        "status": "APPROVED"
    },
    {
        "end_date": 1644969600000,
        "rev": 152,
        "usage_limit": 0,
        "reason_deleted": null,
        "picture_detail": "",
        "revtype": 0,
        "linked_type": "SPECIFIC",
        "modified_date": 1644900601884,
        "type": "OPEN",
        "created_by": "januardy.hp@gmail.com",
        "is_multiple": null,
        "campaign_name": "BLEWAH 4",
        "is_deleted": false,
        "is_auto_apply": false,
        "modified_by": "januardy.hp@gmail.com",
        "campaign_code": "BLEWAH",
        "id": 78,
        "created_date": 1644900601884,
        "picture_banner": "",
        "remarks": "",
        "start_date": 1644883200000,
        "status": "APPROVED"
    },
    {
        "end_date": 1644969600000,
        "rev": 153,
        "usage_limit": 0,
        "reason_deleted": null,
        "picture_detail": "",
        "revtype": 1,
        "linked_type": "SPECIFIC",
        "modified_date": 1644900601884,
        "type": "OPEN",
        "created_by": "januardy.hp@gmail.com",
        "is_multiple": null,
        "campaign_name": "BLEWAH 4",
        "is_deleted": false,
        "is_auto_apply": false,
        "modified_by": "januardy.hp@gmail.com",
        "campaign_code": "BLEWAH",
        "id": 78,
        "created_date": 1644900601884,
        "picture_banner": "",
        "remarks": "",
        "start_date": 1644883200000,
        "status": "APPROVED"
    },
]

Now I need to get the data inside that array, and display it on table on Angular 11 using Typescript, either it's the key, like "start_date", and the value of the key, like "status": "APPROVED". I already try to use Object.value and Object.key, but the return is like this

I got the key, but the value just like [Object]. I need to get the value and display it on table using Angular Material Table. Can someone help me please? Thank you.

Solution

If building a table display, you can also make an array of headers, push keys from the first element and in template display the headers and loop through items in your json and display them. Like: https://stackblitz.com/edit/angular-key-value-table-qnctbf

Answered By - Misha Mashina