No methods in http response object

Question

Object returned by $http.get has no methods. Example: I have my class model

export class Lab {

    constructor(
        public id: number,
        public name: string,
        public description: string,
        public isActive: boolean,
        public classes: Classes[]
    ) { }

    isActive(lab: Lab) {
        return this.isActive;
    }
}

in my service I call http fetching lab

getLab(labId: number) {
    return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId).toPromise();
}

and when I get this in some component, method isActive is undefined, so call

lab.isActive();

throws exception. Is there any clean solution for this?

Typing the response object does not do any casting or conversion. It's just a hint to the compiler. If you want to convert the plain object you get from the JSON, you need to write that code. — jonrsharpe
– jonrsharpe, Commented Jan 4, 2018 at 20:10
Possible duplicate of Angular: Typescript casting JSON response as object model not working — jonrsharpe
– jonrsharpe, Commented Jan 4, 2018 at 20:14
Or stackoverflow.com/questions/46839214/…, or stackoverflow.com/questions/45145385/…, or ... — jonrsharpe
– jonrsharpe, Commented Jan 4, 2018 at 20:15
It's not duplicated, this problem is about calling method after a return from backend. This question was really useful. — Guilherme Alencar
– Guilherme Alencar, Commented Jan 25, 2019 at 13:22

DeborahK · Accepted Answer · 2018-01-04 20:32:10Z

15

The server just returns data formed with properties from the defined object. It doesn't actually create an instance of the object.

Try something like this:

this.lab = Object.assign(new Lab(), this.retrievedLab)

Where this.retrievedLab is the data returned from the server.

This should create the object and then copy any of the retrieved properties into it.

answered Jan 4, 2018 at 20:32

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

1 Comment

Guilherme Alencar Over a year ago

you saved my day, I was about to do a lot of manual labor to make this copy. Thank you

fastAsTortoise · Accepted Answer · 2018-01-04 20:42:50Z

2

In your get call service you can do as @Deborahk mentioned

getLab(labId: number) {
return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId)
           .map(res => Object.assign(new Lab(), res))
           .toPromise();
 }

answered Jan 4, 2018 at 20:42

fastAsTortoise

6517 silver badges17 bronze badges

Comments

Matjaz Hirsman · Accepted Answer · 2019-02-10 00:16:49Z

1

You can also have a class and extend it like this:

getLab(labId: number) {
    return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId)
    .pipe(Lab.serializeResponseMap())
    .toPromise();
}

class definition:

export class Lab extends SerializableMap {
    static instanceType = Lab;

    constructor(
        public id: number,
        public name: string,
        public description: string,
        public isActive: boolean,
        public classes: Classes[]
    ) { super(); }

    isActive(lab: Lab) {
        return this.isActive;
    }
}


class SerializableMap {
  static instanceType: any;

  static serializeResponseMap(): any {
    const createInstance = (r) => {
      return Object.assign(new this.instanceType(), r);
    };

    return map((respValue: any) => {
      if (Array.isArray(respValue)) {
        return respValue.map(r => createInstance(r));
      }
      return createInstance(respValue);
    });
  }
}

answered Feb 10, 2019 at 0:16

Matjaz Hirsman

3623 silver badges9 bronze badges

1 Comment

Saghir Over a year ago

Why toPromise() ?

ppi · Accepted Answer · 2019-10-03 11:30:45Z

This version is inspired by @Matjaz Hirsman response (thanks!), with added deep cloning.
Also: it resembles the Decorator pattern more than Serialization (or actually Deserialization).

getLab(labId: number) {
    return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId)
    .pipe(Lab.decoratingMap())
    .toPromise();
}

Classes:

export class Lab extends Decorable {
    static instanceType = Lab;

    constructor(
        public id: number,
        public name: string,
        public description: string,
        public isActive: boolean,
        public classes: Classes[]
    ) { super(); }

    isActive(lab: Lab) {
        return this.isActive;
    }
}


class Decorable {
  static instanceType: any;

  /**
   * Convert single entity into fully-fledged object
   * @param source js object
   * @return fully-fledged HalResource
   */
  static decorateSingle(source: any) {
    const target = new this.instanceType();
    for (const key in target) {
      if (source[key]) {
        if (target[key] && typeof target[key] === 'object') {
          target[key] = Object.assign(target[key], source[key]);
        } else {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

  /**
   * Convert entity or array of entities into fully-fledged objects
   * @param response js object (or objects)
   * @return fully-fledged object (or objects)
   */
  static decorate(response: any) {
    if (Array.isArray(response)) {
      return response.map(element => this.decorateSingle(element))
    } else {
      return this.decorateSingle(response);
    }
  }

  /**
   * Rx Map operator decorating the JS objects into fully-fledged objects
   */
  static decoratingMap() {
    return map((response: any) => this.decorate(response));
  }
}

Collectives™ on Stack Overflow

No methods in http response object

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related