TypeScript How To Loop Through Array Of Objects

Question

I'm currently busy with an Angular project where I receive an object containing an array of objects from an API.

"reportData" is the object being sent to the API as a parameter through my service.

Example of data sent back from the API:

I want to loop through the array and push the product names to an array and the same with the averageQuantityOrdered but I don't know how to loop through the array and get the values.

One thing that is confusing me is that when you look at the attached screenshot it looks like the result is an object containing an array of objects. And I think that is why I can't loop through it, since technically its an object and not an array.

I tried something like this (retrievedData is the array of objects) but then I get the error "Cannot read property 'forEach' of undefined":

retrievedData: any;

this.retrievedData.array.forEach(element => {
          this.productNames.push(element.ProductName);
        });

I use a service to retrieve the data:

onSubmit(form:NgForm)
  {

    this.service.postReportData().subscribe(
      res => {
        this.retrievedData = res;
        console.log(this.retrievedData);
      },
      err => {
        console.log(err);
      }
    );

  }

Any help would be appreciated!

how is `retrievedData` being set? An http call? If its async, you would need to do this type of work within `subscribe` — Ric, Jun 10 '21 at 09:50
@Ric I make use of the postReportData() function in my service to get the information. I then subscribe to the result and assign that result to retrievedData. I added that piece of code to my question. — trickster625, Jun 10 '21 at 09:55
so you can just do: `this.retrievedData.forEach(item => { })` within the subscribe. Assuming the data returned is not null / undefined — Ric, Jun 10 '21 at 09:59
You could use JS `Array#map`. Do this _inside_ the subscription: `this.productNames = res.reportData.map((data: any) => data.ProductName);`. You cannot do it outside the subscription since you never know when the observable will emit aka it's asynchronous. Learn more about async data in [this](https://stackoverflow.com/a/14220323/6513921) post. — ruth, Jun 10 '21 at 09:59
@Ric I tried that and I got the following error "ERROR TypeError: this.retrievedData.forEach is not a function" — trickster625, Jun 10 '21 at 10:02
@Ric One thing that is confusing me is that when you look at the attached screenshot it looks like the result is an object containing an array of objects. And I think that is why I can't loop through it, since technically its an object and not an array. — trickster625, Jun 10 '21 at 10:09
Check out this:: https://stackoverflow.com/a/48916461/12113049 — Eranki, Jun 10 '21 at 10:14
what you see in the screenshot is an object with element named `reportData` which is an array of objects. `type Items = {ProductName: string; AverageQuantityOrdered: number; ProductOrders: unknown[]; }` `type RetrievedData = { reportData: Items[] }` — m5khan, Jun 10 '21 at 10:25

score 1 · Answer 1 · answered Jun 10 '21 at 10:34

so what you receive is the an object containing array of objects

your res should be of type

type Item = {
  ProductName: string;
  AverageQuantityOrdered: number;
  ProductOrders: unknown[];
}

type RetrievedData = {
  reportData: Item[];
}

so you can set RetrievedData as a type to your retrievedData variable

retrievedData: RetrievedData

instead of any

and then retrievedData.reportData will give you the array.

score 0 · Accepted Answer · answered Jun 10 '21 at 10:32

Thank you everyone for your useful comments!

I got it working with the following code:

onSubmit(form:NgForm)
  {
    this.service.postReportData().subscribe(
      res => {
        this.retrievedData = res;

        this.retrievedData.reportData.forEach(function (item) {
          console.log(item);
          console.log(item.ProductName);
          console.log(item.AverageQuantityOrdered);
        });

      },
      err => {
        console.log(err);
      }
    );

  }

Since reportData contained the array of objects I had to loop through that and not retrievedData.

Once again thanks to everyone, I appreciate the help!

TypeScript How To Loop Through Array Of Objects

2 Answers2