Angular6/Typescript - Mapping of Objects in Arrays in Arrays

Question

We have 2 arrays speisekarte (10 objects) and essensplan (8 objects)

const speisekarte = [
  { id: 11, name: 'Kabeljaufilet', preis: 3.55, art: 'mit Fisch' },
  { id: 12, name: 'Spaghetti Bolognese', preis: 3.85, art: 'mit Fleisch' },

const essensplan = [
  { id: 1, essenProWoche: [11, 12] },

I want essensplan to call the ID's from speisekarte and print out the details of it. At the moment, my web page looks like this:

  - 1, 11, 12

How do implement the details by just using the ID's.

I already have a method for "EssenID" for the detail page of one object but I dont know, how to use it for this type of array.

/** GET essen by ID. Will 404 if id not found */
getEssen(id: number): Observable<Essen> {
  const url = `${this.speisekarteUrl}/${id}`;
  return this.http.get<Essen>(url).pipe(
    tap(_ => this.log(`fetched essen id=${id}`)),
    catchError(this.handleError<Essen>(`getEssen id=${id}`))
 );
}

You mean you want to call this.http.get for each id from essenProWoche? — Explosion Pills
– Explosion Pills, Commented Sep 11, 2018 at 14:27
No. I want the informations to be printed out by essensplan — Ascena
– Ascena, Commented Sep 11, 2018 at 14:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can loop throw essensplan object then loop throw the list of essenProWoche and attach click event to get the selected object by essenProWoche list.

template

<p>List of  essensplan </p>
<div *ngFor="let i of essensplan"> 
  <div>essensplan : {{i.id}}</div>
   <button *ngFor="let id of i.essenProWoche" (click)="print(id)">Ptint Item {{id}} </button>
</div>

<div>
  <p>Selected Item</p>
  {{selectedItem | json}}
</div>

component

  speisekarte = [
    { id: 11, name: 'Kabeljaufilet', preis: 3.55, art: 'mit Fisch' },
    { id: 12, name: 'Spaghetti Bolognese', preis: 3.85, art: 'mit Fleisch' }
  ]

  essensplan = [
    { id: 1, essenProWoche: [11, 12] }
  ]


  selectedItem

  print(id: number) {
     this.selectedItem = this.speisekarte.find(i => i.id == id) 
  }

stackblitz demo

if you want to show item name on the print button it's better to map the id to related object like this

component

  speisekarte = [
    { id: 11, name: 'Kabeljaufilet', preis: 3.55, art: 'mit Fisch' },
    { id: 12, name: 'Spaghetti Bolognese', preis: 3.85, art: 'mit Fleisch' }
  ];

  essensplan : {id:number,essenProWoche:any[]}[] = [
    { id: 1, essenProWoche: [11, 12] },
  ];


  selectedItem;

  ngOnInit() {
    this.essensplan.forEach(item => {
      item.essenProWoche = item.essenProWoche.map( id => {
        
        return  this.speisekarte.find(i => i.id == id) ;
      })
    })
  }
  print(item: number) {
     this.selectedItem = item;
  }

template

<p>List of  essensplan </p>
<div *ngFor="let i of essensplan"> 
  <div>essensplan : {{i.id}}</div>
   <button *ngFor="let item of i.essenProWoche" (click)="print(item)">Ptint Item => {{item.name}} </button>
</div>

<div>
  <p>Selected Item</p>
  {{selectedItem | json}}
</div>

stackblitz demo

happy coding

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 11, 2018 at 14:36

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

4 Comments

Ascena Over a year ago

hey. im trying out your code, but it seems like if you click on a button, every button has the same outprint, Do you have a solution for this?

Ascena Over a year ago

Do you know, how I can Print the Name of the Objects of Speisekarte into the buttons, instead of the ID's

Muhammed Albarmavi Over a year ago

@Ascena you can map each id in essenProWoche to each object in speisekarte

Muhammed Albarmavi Over a year ago

@Ascena I have update the answer to show maped item instead of id

Collectives™ on Stack Overflow

Angular6/Typescript - Mapping of Objects in Arrays in Arrays

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related