Angular/Typescript - Array of Objects of another Array Error

Question

We got an array "food/essen" which consists of 10 objects.

Foodplan is an Array of 8 Objects of the Array "Food" AND an ID "Weeknumber".

The Problem is, that in our web-app the program does not print the details, but it recognizes its 8 objects.

class Essen {
    id: number;
    name: string;
    preis: number;
    art: string;
}

class Essensplan {
    Wochennummer: number;
    EssenProWoche: number[] = new Array(5);

"essen": [
{
  "id": 11,
  "name": "Kabeljaufilet",
  "preis": 3.55,
  "art": "mit Fisch"
},

"essensplan": [
{
  "Wochennummer": 1,
   "EssenProWoche": [
    11,
    12, 
    13
  ] 
},

essensplan.service.ts

/** GET ESSENSPLAN FROM THE SERVER */
getEssensplan(): Observable<Essensplan[]> {
    return this.http.get<Essensplan[]>(this.essensplanUrl)
        .pipe(
            tap(essensplanUrl => this.log('fetched essensplan')),
            catchError(this.handleError('getEssensplan', []))
        );
}

essensplan.component.ts

getEssensplan(): void {
    this.essensplanService.getEssensplan()
        .subscribe(essensplan => this.essensplan = essensplan);
}

essensplan.component.html

<ul class="essensplan">
    <li *ngFor="let essensplan of essensplan">
        <span class="badge">{{essensplan.wochennummer}}</span> 
        {{essensplan.essenProWoche}}
    </li>
</ul>

The result is, that it just shows the bullet points for 8 different objects of the array, but no details. Do you maybe know, where the error is? Important is that in "fetches essensplan".

Answer 1

First of all, you are referencing keys starting with a lowercase letter (wochennummer, essenProWoche) within the template, while in the actual data structure contains keys starting with capital letters (Wochennummer, EssenProWoche). Thats why the template doesnt know these properties.

Try to stay consistent with your property names, i suggest to use CamelCase starting with lowercase letters. But of course its your decision.

Another advice, look into async in order to avoid having a local var like essensplan. It reduces boilerplate.

data:

"essensPlan": [{
 "wochenNummer": 1,
 "essenProWoche": [
   11,
   12, 
   13
 ], 
},//...]

controller:

// further up define essensPlan$ as Observable<Essensplan[]>
essensPlan$ = this.essensplanService.getEssensplan();

template;

<li *ngFor="let essensPlanItem of essensPlan$ | async">
     <span class="badge">{{essensPlanItem.wochenNummer}}</span>
</li>

Furthermore I think your classes are actually interfaces; new-ing EssenProWoche with new Array(5) is not necessary.

Answer 2

<ul class="essensplan">
    <li *ngFor="let essensplan of essensplan.EssenProWoche">
        <span class="badge">{{essensplan.wochennummer}}</span>
        {{essensplan}}
    </li>
</ul>