Trying to print an object with an array of object in it Html

Question

I'm trying to print this object:

export class Ricette {
    nome: string;
    azioni: {tempo: number, azione: string}[][]
  }

export const RICETTE : Ricette[] = [
    {
        nome: 'Alici',
        azioni: [[
            {tempo: 500, azione: 'scongela'},
            {tempo: 60, azione: 'nulla'}        
        ]]
    },
    {
        nome: 'Baccalà',
        azioni: [[
            {tempo: 500, azione: 'scongela'}],
            [
                {tempo: 210, azione: 'immerso'},
                {tempo: 210, azione: 'cestello su'},
                {tempo: 30, azione: 'immerso'}
            ]        
        ]
    },
    {
        nome: 'Hamburger',
        azioni: [[
            {tempo: 500, azione: 'scongela'}],
            [
                {tempo: 210, azione: 'immerso'},
                {tempo: 210, azione: 'cestello su'},
                {tempo: 30, azione: 'immerso'}
            ]        
        ]
    }
];

ricette = RICETTE;

in an html file.

the array azioni[] is going to have different length in every item of ricette.

what can I do for print the object in a html <'ul><'li><'/li><'/ul>?

StepUp · Accepted Answer · 2019-08-08 10:25:40Z

2

You can add parent div with *ngFor in order to display all values of the array like following:

  <div *ngFor="let ricetta of ricettaArray">
        <h2>{{ricetta.nome}}:</h2>
        <div>
            <span>Nome-> </span>{{ricetta.nome}}</div>
            <ul *ngIf="ricetta?.azioni && ricetta?.azioni.length > 0">
                <li *ngFor="let item of ricetta?.azioni ; let i = index" [attr.data-index]="i">
                    {{item?.tempo}}
                    {{item?.azione}}
                </li>
            </ul>
    </div>

the ricettaArray declaration looks as following:

 ricettaArray : Ricette[] = [];

  let r1 = {
      nome: 'Alici',
      azioni: [
        {tempo: 500, azione: 'scongela'},
        {tempo: 60, azione: 'nulla'}]
    };
    let r2 = {
      nome: 'Blici',
      azioni: [
        {tempo: 400, azione: 'bcongela'},
        {tempo: 50, azione: 'bulla'},
        {tempo: 500, azione: 'bulldsfa'}]
    };
    this.ricettaArray.push(r1);
    this.ricettaArray.push(r2);

edited Aug 8, 2019 at 10:25

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

answered Aug 8, 2019 at 9:23

bat7

8761 gold badge10 silver badges23 bronze badges

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

2 Comments

Andrea Favero Over a year ago

it works pretty well, thanks. can you edit the last part of the code?

StepUp Over a year ago

@AndreaFavero Sorry I've inserted my answer to not right place. Sorry, bat7. Now I've updated my answer

StepUp · Accepted Answer · 2019-08-08 10:25:52Z

1

There is no such type:

azioni: {tempo: number, azione: string}[]

But there is a such type and its name is object:

azioni: {tempo: number, azione: string}

You can use *ngFor to show the following format data:

ricetta : Ricette = {
    nome: 'Alici',
    azioni: [
      {tempo: 500, azione: 'scongela'},
      {tempo: 60, azione: 'nulla'}]
  }

and HTML:

div>
    <span>Nome-> </span>{{ricetta.nome}}
</div>
<ul *ngIf="ricetta?.azioni && ricetta?.azioni.length > 0">
    <li *ngFor="let item of ricetta?.azioni ; let i = index" [attr.data-index]="i">
        {{item?.tempo}}
        {{item?.azione}}
    </li>
</ul>

UPDATE: You can use the second loop:

<div *ngFor="let ricetta of ricettaArray">
            <h2>{{ricetta.nome}}:</h2>
            <div>
                <span>Nome-> </span>{{ricetta.nome}}</div>
                <ul *ngIf="ricetta && ricetta?.length > 0">
                    <li *ngFor="let item of ricetta?.azioni;">
                        {{item?.tempo}}
                        {{item?.azione}}

                        <p> The second loop: </p>
                        <ul>
                            <li *ngFor="let subItem of item"> 
                               {{subItem.tempo}} 
                               {{subItem.azione}}
                            </li>
                        </ul>
                    </li>
                </ul>
        </div>

edited Aug 8, 2019 at 10:25

answered Aug 8, 2019 at 9:16

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

5 Comments

Andrea Favero Over a year ago

thanks. I have edited my question. I have modified the object. can you please help Me?

StepUp Over a year ago

@AndreaFavero Yeah, but there is no such type: azioni: {tempo: number, azione: string}[] ? What type do you want to use? and could you fill the sample data?

Andrea Favero Over a year ago

azioni[] is an array and inside it there is an array of object

Andrea Favero Over a year ago

I've included the full data in the question

StepUp Over a year ago

@AndreaFavero I've updated my answer. Sorry, I've edited bat7 answer and put my code to bat7 answer, not my. I was very hurry. Sorry:). Could you reconsider my updated answer?

Collectives™ on Stack Overflow

Trying to print an object with an array of object in it Html

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related