Initialize a TypeScript object from JSON object using .map complains myclass.myFunction is not a function

Question

This code throws an error in the method of "populateGridRows()", at the line of “row.setCompuetedProperties();”. The error message is – “ERROR TypeError: row.setCompuetedProperties is not a function”.

I can see all the properties (with data) on the “row” object in the console just before I get the error.

As far as I can understand it is all about mapping the JSON data coming from the server into a class. Please let me know where I have made a mistake. Thanks.

delivery-plan.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { DetailRow, ExcelExportProperties, FilterSettingsModel, Grid, GridComponent, GridLine, PdfExportProperties } from "@syncfusion/ej2-ng-grids";
import { ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
import { UtilService } from "../../../shared/services/util.service";
import { ConditionBasedMaintenanceStatusEnum } from "../../enums";
import { ConditionAssessmentService, IConditionBasedMaintenanceRowModel } from "../../services/conditionassessment.service";
import { DeliveryPlanModel, DeliveryPlanService, IDeliveryPlanModel } from "../../services/delivery-plan.service";

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-delivery-plan',
  templateUrl: './delivery-plan.component.html',
  styleUrls: ['./delivery-plan.component.scss']
})

export class DeliveryplanComponent implements OnInit {
  schoolNumber: number;
  deliveryPlanItems: DeliveryPlanModel[];
  componentVariables: ConditionAssessmentComponentVariables;
  gridRows: Array<DeliveryPlanModel>;
  @ViewChild("deliveryItemsGrid") deliveryItemsGrid: GridComponent;

  progressValue1 = 100;
  progressValue2 = 62;
  clickedYear = null;

  constructor(private route: ActivatedRoute, private svcConditionAssessment: ConditionAssessmentService,
    private svcUtil: UtilService, private deliveryPlanService: DeliveryPlanService) {
    this.componentVariables = new ConditionAssessmentComponentVariables();
    this.gridRows = new Array<DeliveryPlanModel>();
  }

  ngOnInit() {
    this.route.parent.params.subscribe(params => {
      this.schoolNumber = parseInt(params["id"]);
    });  

    Grid.Inject(DetailRow);
    this.getDeliveryPlanItems();
  }

  public getDeliveryPlanItems() {
    this.deliveryPlanService
      .getDeliveryPlanItems(this.schoolNumber.toString()).subscribe(
        data => {
          if (data) {
            this.deliveryPlanItems = data;
            this.populateGridRows();
          }
        }
      )
  }

  public populateGridRows(): void {
        if (this.deliveryPlanItems && this.deliveryPlanItems.length) {
          for (var i = 0; i < this.deliveryPlanItems.length; i++) {
            let row = this.deliveryPlanItems[i];
            console.log(row);
            row.setCompuetedProperties(); // The Error is associated with this line
            this.gridRows.push(row);
          }
        }
      }

delivery-plan.service.ts

import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Router } from '@angular/router';
import { Observable, Operator } from "rxjs";
import { ErrorsService } from "../../shared/services/errors.service";
import { ConditionBasedMaintenanceStatusEnum } from "../enums";

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

export interface IDeliveryPlanModel {
  //Props
  type: string;
  id: number;
  buildingName: string;
  location: string;
  asset: string;
  element: string;
  subElement: string;
  description: string;
  trade: string;
  status: number;
  statusDisplay: string;
  plannedDate: Date;
  completedDate: Date;
  deferred: boolean;
  // methods
  setCompuetedProperties(): void;
}

export class DeliveryPlanModel implements IDeliveryPlanModel {
  //Props
  type: string = null;
  id: number = null;
  buildingName: string = null;
  location: string = null;
  asset: string = null;
  element: string = null;
  subElement: string = null;
  description: string = null;
  trade: string = null;
  status: number = null;
  statusDisplay: string = null;
  plannedDate: Date = null;
  completedDate: Date = null;
  deferred: boolean = null;
  color: string = null;

  // methods
  public setCompuetedProperties(): void {   
    switch (this.status) {
      case ConditionBasedMaintenanceStatusEnum.AddedToPlanner:
        this.statusDisplay = "Planned";
        break;
      case ConditionBasedMaintenanceStatusEnum.Deferred:
        this.statusDisplay = "Deferred";
        break;
      case ConditionBasedMaintenanceStatusEnum.Completed:
        this.statusDisplay = "Completed";
        break;
    }
  }
}

@Injectable()
export class DeliveryPlanService {
  routePrefix: string = "api/deliveryplans";

  constructor(private http: HttpClient, private router: Router, private errorsService: ErrorsService) { }

  public getDeliveryPlanItems(schoolId: string): Observable<DeliveryPlanModel[]> {
    var list = this.http.get<DeliveryPlanModel[]>(this.routePrefix + "/schools/" + schoolId)
      .map<DeliveryPlanModel[], DeliveryPlanModel[]>(items => {
        return items;
      }).catch(error => this.errorsService.handleError(error));
    return list;
  }
}