How to loop through array of objects in angular 6?

Question

I am very new to angular and I am assigned to a task where I want to get data from an API and iterate and display it in a chart. My angular version is 6.

This is the response JSON format, It is a list of objects-

[
    {
        "counts": 0,
        "time": "00:00:00"
    },
    {
        "counts": 0,
        "time": "01:00:00"
    },
    {
        "time": "02:00:00",
        "counts": 1
    },
    {
        "counts": 7,
        "time": "03:00:00"
    }
]

To fetch that

 data : [];

this.service.getPaymentDistributionData()
    .subscribe((res) => {
      console.log(res)
    })

How can I get each count and time and print?

Thanks,

Does this answer your question? [Iterate over array of objects in Typescript](https://stackoverflow.com/questions/46213989/iterate-over-array-of-objects-in-typescript) — Beller, Aug 31 '21 at 09:49
If i use of it is saying like Type 'Object' is not an array type or a string type — Dasun, Aug 31 '21 at 10:22

score 1 · Answer 1 · answered Aug 31 '21 at 09:56

1

You can use for .. of

for (let ct of res) {
     console.log(ct.counts);
     console.log(ct.time); 
}

answered Aug 31 '21 at 09:56

user1234

91
8

here I am getting an error like Type 'Object' is not an array type or a string type. What is that. – Dasun Aug 31 '21 at 10:19
Your service probably returns an Object, not an Array. – user1234 Aug 31 '21 at 10:55

tiana · Accepted Answer · 2021-08-31T10:33:54.860

1

this.service.getPaymentDistributionData()
.subscribe((res) => {
    res.forEach(x => console.log(x.count))
})

Try Something Like this For Array of Object where res = [{}, {}]

for Object where res = {}

Object.keys(res).forEach((key) => )

edited Aug 31 '21 at 10:33

answered Aug 31 '21 at 10:27

tiana

374
1
8
23

Same problem i am having here like Property 'forEach' does not exist on type 'Object'. – Dasun Aug 31 '21 at 10:29
okay it should work perfectly on array of object i think you should check you data again if its only Object or Array Of objects. – tiana Aug 31 '21 at 10:31
Its array of objects – Dasun Aug 31 '21 at 10:32
Please see i have noted in the question of my return type – Dasun Aug 31 '21 at 10:35
check the [stackblitz](https://stackblitz.com/edit/angular-ivy-faqsku) i have used your data – tiana Aug 31 '21 at 10:46
1

I got your answer and i slightly modify it as res: any[], then it worked – Dasun Aug 31 '21 at 11:31

How to loop through array of objects in angular 6?

2 Answers2