How to use array object in for loop using angular 11?

Question

I have fetched data from backend API, need to loop the data in front end but its value not return.

here is my response from backend API.

[
    [
        {
            "choice": 1,
            "count": 4,
            "percentageValue": "80.0000"
        },
        {
            "choice": 2,
            "count": 1,
            "percentageValue": "20.0000"
        }
    ],
    [
        {
            "choice": 1,
            "count": 4,
            "percentageValue": "80.0000"
        },
        {
            "choice": 2,
            "count": 1,
            "percentageValue": "20.0000"
        }
    ]
]

In ts file

submitPoll(data){
    this.pollService.submitPoll(data).subscribe(response =>{
      this.percentage=response.body;
    });
  }

In html file

<p *ngFor="let percentage of percentage;let i= index;">
                  {{percentage.choice  }}
                </p>

how to use the for loop for array object ? i need to display the percentage in options

It's an array of an array. You either need to flatten the inner arrays to one level up or use two nested *ngFors in the template. — Barremian
– Barremian, Commented Apr 13, 2021 at 8:45

Ram Pukar · Accepted Answer · 2021-04-13 09:04:35Z

1

<ng-template ngFor let-percentItems [ngForOf]="percentage">
    <ng-template ngFor let-items [ngForOf]="percentItems">
        {{ items.choice}} | {{ items.count}} | {{ items.percentageValue}} |<br />
    </ng-template>
</ng-template>

OUTPUT

answered Apr 13, 2021 at 9:04

Ram Pukar

1,63117 silver badges20 bronze badges

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

3 Comments

manikandan Over a year ago

its actually return only first two rows

manikandan Over a year ago

how to fetch only first array only

Ram Pukar Over a year ago

this.pollService.submitPoll(data).subscribe(response =>{ this.percentage=response.body; this.percentage = this.percentage.slice(0, 1); });

N.F. · Accepted Answer · 2021-04-13 08:58:54Z

1

As @MichaelD mentioned, percentage is array of array. A simple solution is to use *ngFor twice.

<div *ngFor="let innerArray of percentage;">
  <p *ngFor="let obj of innerArray;">
    {{obj.choice}}
  </p>
</div>

answered Apr 13, 2021 at 8:58

N.F.

4,2025 gold badges29 silver badges63 bronze badges

Comments

Jayme · Accepted Answer · 2021-04-13 09:06:18Z

1

Assuming response.body is a valid json array as specified you could just use the following to grab the inner items and merge them into a new array for use

const percentages = [].concat(...response.body);

You will then end up with the following for use in your loop

[
  {
    "choice": 1,
    "count": 4,
    "percentageValue": "80.0000"
  },
  {
    "choice": 2,
    "count": 1,
    "percentageValue": "20.0000"
  },
  {
    "choice": 1,
    "count": 4,
    "percentageValue": "80.0000"
  },
  {
    "choice": 2,
    "count": 1,
    "percentageValue": "20.0000"
  }
]

answered Apr 13, 2021 at 9:06

Jayme

1,9861 gold badge13 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to use array object in for loop using angular 11?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related