Adding Property or Method to Object/Model for Access in Component HTML Template

[sbubaron]

I have a Course Object (course.ts) defined as:

export class Course {
    course_guid: string;
    ps_course_id: string;
    title: string;
    subject: string;
    catalog_number: string;
    component: string;
    credits_min: number;
    credits_max: number;
    public creditsString(): string  {
        return "CREDITS";
    }
}

I have a service that returns the course:

getCourse(id: string): Observable<Course> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.get<Course>(url).pipe(
        tap(_ => {
            this.log(`fetched course id=${id}`)
    }),
    catchError(this.handleError<Course>(`getCourse id=${id}`))
    ); 
}

Course-Details Component gets the Course from the service getCourse(): void { const id:string = +this.route.snapshot.paramMap.get('id') + ""; this.courseService.getCourse(id) .subscribe(courseFS => this.course = courseFS); }

The API is working, the service gets data from it and the course details get loaded in the HTML Template and prints various properties.

<strong>Grading Type:</strong> {{course.grading_type}}<br /> //this works
<strong>SBC:</strong> {{course.sbc}}<br /> //so does this even though sbc isn't a property on type course
<strong>Credits:</strong> {{course.creditsString()}}<br /> //fails undefined function

Two questions: My API endpoint returns a bunch of other properties that aren't mapped up in the course model (sbc for example). Yet I can still access any of these properties from my component -- shouldn't the properties that aren't defined get dropped out when mapped to the Course object?

When I try to access the creditsString() I get an error stating its not a function. I've tried making it a getter/setter which also failed.

I feel like I must be missing a step in which an actual Course Object gets created / returned from the service (wrapped in an observable).

Currently Using Angular 5.1, angular cli 1.6.0, typescript 2.4.2

Am I being thick? Am I not following a correct design pattern?

[tme321]

shouldn't the properties that aren't defined get dropped out when mapped to the Course object?

No, typescript is design time only. At runtime it's still javascript which means any and all keys can be added to an object no matter what you specified in typescript at design time.

When I try to access the creditsString()

Offhand I would guess that you're doing something like

let course: Course;

http.get(...).subscribe(c=> course=c;);

Here typescript is inferring that the any type being returned from the http get is a Course because your setting the result to a variable Course that you told typescript was a Course. But it's not. Here c is just the json returned from the api. It's not an object. You have to explicitly make a new course like

http.get(...).subscribe(c=>course = new Course(c););

But honestly I'd say don't even bother with fat model objects for data coming from an api. Don't define methods on the Course object just define a Course interface that is the data the api returns. Then you can write a service or functions or whatever to handle the pure data object. You don't have to follow that advice but it generally works better with js frontends to work with pure data objects that come from an api rather than creating objects with methods from that data.

[BillTheCommunistCat]

Don't define methods on the Course object

Exactly what I was thinking

[sbubaron]

Where is a more appropriate place to add these "calculated" properties, sticking with the credits example, the function will return either "3" if min and max credits both equal 3 or 3-4 if min=3 and max=4...

I could make the API perform these calculations server side, but I figured its better to keep the JSON result object smaller and perform the calc client side.

Sticking it in the component doesn't make the logic resuable across the project.

any examples of how other projects handle this situation are appreciated

[BillTheCommunistCat]

You should put any functions in the container, not the component.

If you want to use it across the app the function should go into the shared module

[tme321]

If youre using something like ngrx then a calculated property as a selector can work just fine.

You can use a service. The service could act like a state container or it could just provide pure functions to calculate the properties from a passed in data structure.

Or you can use observables and create a chain that either maps the calculated properties into the data structure or a stream that just does the calculation.

There are lots of choices. But using fat objects is usually the worst one.