Angular 2 display Array in array

Question

If I have this array :

array = [
{
  img: [
        {0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
        {1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
      ],
}

{
  img: [
        {0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
        {1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
      ],
}
]

How do I display it in HTML ? I know how to display one img if it was img : 'url' it would look like this ;

this.imgs = this.myprovider.getArray();

HTML :

<div ngfor="let item of imgs">{{item.img}}</div>

I wrote it by myself in a provider, so I am not sure if its valid, 0 errors. — Angulandy2
– Angulandy2, Commented Oct 14, 2018 at 17:38

Brandon Taylor · Accepted Answer · 2018-10-14 17:50:34Z

2

Since your key in the array of img objects is a number starting at 0, you can just use the loop index to access the value:

<ul>
  <li *ngFor="let item of array">
    <ul>
      <li *ngFor="let image of item.img; let i = index">
        <img src="{{ image[i] }}" />
      </li>
    </ul>
  </li>
</ul>

Stack Blitz doesn't want to load the image URLs for some reason, but as you can see from the output, the HTML is correct: https://stackblitz.com/edit/nested-array-example

edited Oct 14, 2018 at 17:50

answered Oct 14, 2018 at 17:43

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

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

4 Comments

Angulandy2 Over a year ago

Cannot find a differ supporting object 'img.clipartxtras.com/…' of type 'string'. NgFor only supports binding to Iterables such as Arrays

Brandon Taylor Over a year ago

Did you look at the StackBlitz example? it uses your sample data. You can only bind ngFor to a value that supports iteration (looping). If the data you're actually using doesn't match your question, you need to update your question.

Brandon Taylor Over a year ago

Btw, your example data is missing a comma in between the array objects, which is fixed in the example.

Angulandy2 Over a year ago

Its same as question , i have 2 urls in array.

Chiffie · Accepted Answer · 2018-10-14 17:40:01Z

0

Try

<div ngfor="let item of imgs">{{item.img.toString()}}</div>

or

<div ngfor="let item of imgs">
    <div ngfor="let img of item.img">{{img}}</div>
</div>

answered Oct 14, 2018 at 17:40

Chiffie

6515 silver badges18 bronze badges

Comments

Sunil · Accepted Answer · 2018-10-14 17:40:47Z

0

You can iterate twice in nested manner -

<ng-container ngfor="let childImages of imgs">
    <div ngfor="let item of childImages">{{item.img}}</div>
<ng-container>

Note : You should use instead of any other html element otherwise it will distort html look & feel.

answered Oct 14, 2018 at 17:40

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Comments

Suresh Kumar Ariya · Accepted Answer · 2018-10-14 17:41:24Z

0

<div *ngFor="let item of imgs">
    <div *ngFor="let img of item.img; let i=index;">{{img[i]}}</div>
</div>

answered Oct 14, 2018 at 17:41

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

Suresh Kumar Ariya Over a year ago

',' is missing inside object array.

Collectives™ on Stack Overflow

Angular 2 display Array in array

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related