Showing Nested Arrays in Angular 2

Question

Showing Nested Arrays in Angular 2

If I have an array with image links as shown below, how can I display them in HTML?

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',},
      ],
}
]

I understand that if the structure was simpler like img : 'url', then the HTML code would look like this:

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

HTML :

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

javascript angular typescript

Answer 1

Answer №1

When dealing with an array of img objects where the key is a number starting at 0, you can simply use the loop index to retrieve 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>

Although Stack Blitz may have trouble loading the image URLs, the provided output demonstrates that the HTML structure is correct: https://stackblitz.com/edit/nested-array-example

Answer 2

When dealing with an array of img objects where the key is a number starting at 0, you can simply use the loop index to retrieve 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>

Although Stack Blitz may have trouble loading the image URLs, the provided output demonstrates that the HTML structure is correct: https://stackblitz.com/edit/nested-array-example

Answer 3

Answer №2

Give it a shot

<div ngfor="let picture of pictures">{{picture.picture.toString()}}</div>

or

<div ngfor="let picture of pictures">
    <div ngfor="let pic of picture.picture">{{pic}}</div>
</div>

Answer 4

Give it a shot

<div ngfor="let picture of pictures">{{picture.picture.toString()}}</div>

or

<div ngfor="let picture of pictures">
    <div ngfor="let pic of picture.picture">{{pic}}</div>
</div>

Answer 5

Answer №3

To achieve nested iteration, you can loop through your data twice in the following manner:

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

It's important to use <ng-container> instead of any other HTML element to maintain the appearance and functionality of your HTML code.

Answer 6

To achieve nested iteration, you can loop through your data twice in the following manner:

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

It's important to use <ng-container> instead of any other HTML element to maintain the appearance and functionality of your HTML code.

Answer 7

Answer №4

<div *ngFor="let element of pictures">
    <div *ngFor="let image of element.picturesArray; let j=index;">{{image[j]}}</div>
</div>

Answer 8

<div *ngFor="let element of pictures">
    <div *ngFor="let image of element.picturesArray; let j=index;">{{image[j]}}</div>
</div>

Showing Nested Arrays in Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Developing various VueJS TypeScript projects utilizing a shared library

Manipulate data in a component with Angular's behavior subject, then reflect these changes in a separate component

There is no 'Access-Control-Allow-Origin' header found on the requested resource in Heroku for Node.js

What is the necessity of utilizing getStaticPaths() alongside getStaticProps()?

Leverage the power of Webpack to make Vue available globally

What is the process for uploading a text file into JavaScript?

Generating instances using TypeScript generics

Deprecated message received from the body-parser node module

Vuetify: Utilizing condition-based breakpoints

Struggling to differentiate between the various CSS elements on a webpage and pinpointing the correct CSS for use

JavaScript function to divide arrays into sequences

Error: The property you are trying to set is undefined and cannot

Modifying the default text within a select box using jQuery

Is there a way for me to import a variable from one file and use require() to access it in another file?

Altering Hues with a Click

What is the best way to send an email with a randomly generated HTML output using a <button>?

Restricting JQuery pop-up to be shown only once

What do you understand by the term "cyclic data structures"?

Displaying buttons based on the existence of a token in Angular - A guide

Retrieve the title of the page that triggers the loading of another page through JQuery