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".

What value you are getting in this.essensplanService.getEssensplan() .subscribe(essensplan => this.essensplan = essensplan); } its a proper value just print it in console and check — Siddharth Jain
– Siddharth Jain, Commented Sep 11, 2018 at 10:50
See below answer. You are not referencing .EssenProWoche in your ng-repeat — Fintan Kearney
– Fintan Kearney, Commented Sep 11, 2018 at 10:52

mareks · Accepted Answer · 2018-09-11 12:09:50Z

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.

answered Sep 11, 2018 at 12:09

mareks

7926 silver badges5 bronze badges

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

2 Comments

woid_pointer Over a year ago

I think you're right: imho the part subscribe(essensplan => this.essensplan = essensplan) causes trouble, because the local essensplan is the same as this.essensplan. Try to avoid local variables and use async instead.

Ascena Over a year ago

@mareks - we found the problem and you helped us with the advice to rename everything. it works now. Thanks!

Fintan Kearney · Accepted Answer · 2018-09-11 10:53:45Z

0

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

edited Sep 11, 2018 at 10:53

answered Sep 11, 2018 at 10:49

Fintan Kearney

7647 silver badges15 bronze badges

2 Comments

Ascena Over a year ago

console says: EssensplanComponent.html:12 ERROR TypeError: Cannot read property 'EssenProWoche' of undefined

jwg Over a year ago

Could you add an explanation of this code, since it's not clear if/how it solves the problem? Thanks!

Collectives™ on Stack Overflow

Angular/Typescript - Array of Objects of another Array Error

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related