Angular 7 ngFor iterate over array of objects

Question

I can't iterate over an array of objects. In each object, I have a name, but I can't get the text of the object or the name inside it.

I have the following code in my ts file

retrieveMultiple(config, "accounts")
.then(
    (results) => {
        const accounts: any[] = [];
        for (let record of results.value) {
            accounts.push(record);
        }

        this.accounts= accounts;
        console.log(accounts[0].name);
        console.log(accounts);
    },
    (error) => {
        console.log(error);
    }

And I have this in my HTML file:

      <p>Accounts:</p>
  <ul>
    <li *ngFor="let account of accounts | json">
      {{ account.name }}
    </li>
  </ul>

Why are you using the json pipe?

Antoine Boisier-Michaud
– Antoine Boisier-Michaud

2019-03-02 21:15:45 +00:00
Commented Mar 2, 2019 at 21:15 — Antoine Boisier-Michaud
– Antoine Boisier-Michaud, Commented Mar 2, 2019 at 21:15
why do you need json pipe here?

Katya Pavlenko
– Katya Pavlenko

2019-03-02 21:15:49 +00:00
Commented Mar 2, 2019 at 21:15 — Katya Pavlenko
– Katya Pavlenko, Commented Mar 2, 2019 at 21:15

Steve Boyd · Accepted Answer · 2019-03-02 21:18:14Z

3

You should not have the json pipe in your loop expression. Change your output code to this:

<p>Accounts:</p>
<ul>
  <li *ngFor="let account of accounts">
    {{ account.name }}
  </li>
</ul>

or for debugging you could use this:

<p>Accounts:</p>
<ul>
  <li *ngFor="let account of accounts">
    {{ account | json }}
  </li>
</ul>

answered Mar 2, 2019 at 21:18

Steve Boyd

1,36712 silver badges18 bronze badges

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

Comments

João Eudes Lima · Accepted Answer · 2019-03-02 21:27:38Z

0

https://angular.io/api/common/NgForOf

retrieveMultiple(config, "accounts")
.then(
    (results) => {
        this.accounts = results.value;
        console.log(this.accounts[0].name);
        console.log(this.accounts);
    },
    (error) => {
        console.log(error);
    }
)

<p>Accounts:</p>
<ul>
  <li *ngFor="let account of accounts">
    {{ account.name }}
  </li>
</ul>

edited Mar 2, 2019 at 21:27

answered Mar 2, 2019 at 21:19

João Eudes Lima

8942 gold badges12 silver badges24 bronze badges

2 Comments

Yossi Bondasd Over a year ago

i have accounts = []; so account.value will not work

João Eudes Lima Over a year ago

Then it will not display anything inside the <ul>

Collectives™ on Stack Overflow

Angular 7 ngFor iterate over array of objects

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related