How to loop with *ngFor in array of objects?

Question

I'm learning Angular2, so please forgive me if I'm asking a stupid question. I am receiving an arrays of objects and it looks like this:

obj.json

data: [
        {
           item: "banana"
        }
     ],
     [
        {
           item: "apple"
        }
     ],
     [
        {
           item: "lemon"
        }
     ]

In my component file I have managed to scope it in a scope:

this.fruits = data[0].item;

The issue is I only manage to scope the first item, or the second item and so on, by the index. How can I scope them all and then show them in a HTML file with *ngFor?

This is an invalid object.

kind user
– kind user

2017-02-22 19:10:23 +00:00
Commented Feb 22, 2017 at 19:10 — kind user
– kind user, Commented Feb 22, 2017 at 19:10

Cobus Kruger · Accepted Answer · 2017-11-30 10:28:19Z

20

Your array isn't valid JavaScript. Assuming your data actually looks like this:

data: [
        {
           item: "banana"
        },
        {
           item: "apple"
        },
        {
           item: "lemon"
        }
     ]

Then you'll iterate through the data like this:

<li *ngFor="let fruit of data">
   <b> {{fruit.item}} </b>           
</li>

edited Nov 30, 2017 at 10:28

user2938704

answered Feb 22, 2017 at 19:12

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

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

4 Comments

tholo Over a year ago

I didn't place the all objects, but there are many other keys besides the key item. What is important to me is how I can loop through arrays, via index, to get them all. Please note that I don't know what is the number of indexex.

Cobus Kruger Over a year ago

@tholo The problem is not the number of keys, but the placement of the square brackets. You basically have a list of arrays of single objects, which is not valid JavaScript.

tholo Over a year ago

you didn't understand me. I don't have a list of arrays of single objects, I have other objects there as well, but I didn't name them as they are not significant for my example..

Cobus Kruger Over a year ago

Forget about the objects for a second, then your declaration looks like this: data: [],[],[]. That's not valid JavaScript. You can have data: [[],[],[]](array of arrays) or data: [] (array), but not what you showed.

kind user · Accepted Answer · 2017-02-22 19:14:09Z

4

Your object isn't valid. I've edited it.

To iterate over object properties, use:

<ul>
  <li *ngFor='let elem of data'>{{ elem.item }}</li>
</ul>

Working plunker

answered Feb 22, 2017 at 19:14

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

Wep0n · Accepted Answer · 2018-07-11 08:51:40Z

I don't exactly see the problem. I'm using this as well.

I have an array of objects: private receipts:receipt[] where receipt is an object that contains some relevant data

export class receipt {
    public imageData;
    private accountNo;
    private tripNo;
    private ticketType;
    //..getters/setters and other variables
}

Now after filling the array I simply use it like this (nevermind the ion-slides, this does work for divs as well):

<ion-slide *ngFor="let entry of receipts; let i = index" id="{{'imgSlideContainer_'+i}}">
     <div>
        <img src="{{entry.getImageData()}}" id="{{'imgSlide_'+i}}" (click)="openImageUtil(entry, 'imgSlide_'+i)">
     ...
</ion-slide>

This behaves as expected. For form, you can also use {{entry.imageData}} if it's an accessible property (Yes, I tested this)

Similarily for nested Objects you should be able to simply {{entry.someSubObject.someSubSubObject}}

Hope this helps.

Robbie Milejczak · Accepted Answer · 2019-06-03 13:29:16Z

1

export class SomeClass {
    public name: String;
    constructor(_name: String){
       this.name= _name;
    }
}    

let fruits : Array<SomeClass>[new SomeClass("banana"),new SomeClass("apple"),new SomeClass("lemon")];


<li *ngFor="let fruit of fruits">
   <b> {{fruit.name}} </b>           
</li>

edited Jun 3, 2019 at 13:29

Robbie Milejczak

5,8203 gold badges37 silver badges68 bronze badges

answered Feb 23, 2017 at 11:17

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

Comments

Jeff Moretti · Accepted Answer · 2024-09-12 16:40:14Z

I was stumped for a long while on a simple *ngFor loop, and I couldn't figure out why I kept getting a 'item_r2 is undefined' error due to my loop.

Turned out, I had the *ngFor loop nested in a bunch of HTML, in particular a <div ngbAccordion> and other stuff that hid item/was a collapsible element. And I kept get the error I mentioned above when the element displayed/expanded.

However, I did notice that it worked just fine once I took the *ngFor loop out of my <div ngbAccordion> element (ie and into the top of the HTML tree)

UPDATE:

Found a full fix to my problem above. I had a race condition - see *ngFor displaying data but throwing 'undefined' error

2ND UPDATE:

Even using the Elvis (ie ? ) operator didn't quite solve my problem. Instead, I created a new 'helper' component and placed that instead in my <div ngbAccordion> element

ie:


etc etc code

<div ngbAccordionBody>
    <app-here-is-my-new-component></app-here-is-my-new-component>
</div>

etc etc code

Collectives™ on Stack Overflow

How to loop with *ngFor in array of objects?

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related