Can't access method from model

Question

I have the following model:

import { EventConsumerModel } from './EventConsumerModel';

export class EventLogModel {

  private id: number;
  private event_type: string;
  private occurred_on: string;
  private producedDomain: string;
  private eventConsumers: EventConsumerModel[];

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }

  public getEventConsumers(): EventConsumerModel[] {
    return this.eventConsumers;
  }
}

and

export class EventConsumerModel {

  private status: string;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }

  public getStatus(): string {
    return this.status;
  }
}

I'm trying to access the getStatus() method from inside of EventConsumerModel . Unfortunaly, this isn't working.

If I do something like:

for (let ec of this.events[0].getEventConsumers()) {
  console.log(ec.getStatus());
}

where this.events is of type EventLogModel[] ; I get an error saying ec.getStatus is not a function .

My service for populating this.events looks like this:

public getEvents(batchId: string): Observable<EventLogModel[]> {
    return this.http.get(EVENTS_URL + batchId + EVENTS_ENDPOINT)
      .map((res: Response) => {
        const events = res.json().eventList;
        return events.map((e) => new EventLogModel(e));
      })
      .catch(this.handleErrorObservable);
}

and a typical JSON response looks like this:

  "batchId": "2c9180855f359542015f35aa2d460d74",
  "status": "REJECTED",
  "createdTime": "2017-10-19T17:24:26Z",
  "eventList": [
    {
      "unique_id": 200168014,
      "id": "12091792-9020-4311-8bad-44fa8b69d218",
      "event_type": "com.adp.pi.eventmachine.PayFileProcessingCompleted",
      "partition_key": "2c9180855f359542015f35aa2d460d74",
      "occurred_on": "2017-10-19T17:24:26",
      "trace_id": "-8551048985939099152",
      "event_version": "1",
      "producedDomain": "PAY_FILE_STATUS",
      "eventConsumers": [
        {
          "status": "COMPLETED",
          "listener": "com.clientmanagement.hr.presentation.event.PayFileProcessingCompletedEventHandler",
          "consumedOn": "2017-10-19T17:24:27",
          "consumedDomain": "POLICY"
        }
      ],
      "consumedOn": "2017-10-19T17:24:27"
    }
  ]
}

Any ideas what I'm doing wrong? I'd ultimately like to be able to use the getStatus() function in HTML with binding.

Edit: It looks like it's never creating an EventConsumerModel . I put a console.log() in the constructor for that model and nothing came up. Might have to do with how I'm mapping objects in my service; but I don't know how to fix that.

Answer 1

The problem is your Object.assign(this, values); inside the constructor, it maps the input to the member variables, but isn't creating any instances for you. Therefore the eventConsumers member is just an array of objects and not an array of instances of EventConsumerModel .

So you have to set the member variable of eventConsumers explicitly:

interface EventLogResponse {
  id?: number, 
  event_type?: string, 
  occured_on?: string, 
  producedDomain?: string,
  eventConsumers?: Object[]
}

export class EventLogModel {

  private id: number;
  private event_type: string;
  private occurred_on: string;
  private producedDomain: string;
  private eventConsumers: EventConsumerModel[];

  constructor({ 
    eventConsumers,
    ...obj
  }: EventLogResponse = {}) {
    Object.assign(this, obj);
    this.eventConsumers = eventConsumers.map(ec => new EventConsumerModel(ev));
  }

  public getEventConsumers(): EventConsumerModel[] {
    return this.eventConsumers;
  }
}