Get Data Object From Array On Angular

Question

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": "[email protected]",
        "is_multiple": null,
        "campaign_name": "Blewah 2022",
        "is_deleted": false,
        "is_auto_apply": true,
        "modified_by": "[email protected]",
        "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": "[email protected]",
        "is_multiple": null,
        "campaign_name": "BLEWAH 4",
        "is_deleted": false,
        "is_auto_apply": false,
        "modified_by": "[email protected]",
        "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": "[email protected]",
        "is_multiple": null,
        "campaign_name": "BLEWAH 4",
        "is_deleted": false,
        "is_auto_apply": false,
        "modified_by": "[email protected]",
        "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.

Try using ngFor. If you want to use Object.key add html code in your question. — abdella
– abdella, Commented Feb 20, 2022 at 7:31

Misha Mashina · Accepted Answer · 2022-02-20 08:05:20Z

1

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 Feb 20, 2022 at 8:05

Misha Mashina

2,1262 gold badges6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Untitled99 Over a year ago

Thank you very much. You saved me 😄

wlf · Accepted Answer · 2022-02-20 07:56:57Z

0

Use the keyvalue pipe.

<tr *ngFor="let item of items">
  <ng-container *ngFor="let prop of item | keyvalue">
    <td> prop.key </td>
    <td> prop.value </td>
  </ng-container>
</tr>

answered Feb 20, 2022 at 7:56

wlf

3,4231 gold badge24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Get Data Object From Array On Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related