[SOLVED] How to return a Class from an Observer (httpClient.get)

Issue

I’m in Angular and I’m trying to map an object by an I’d like this:

Service:

getById(id: number) {
    let lista = this.httpClient.get('http://localhost:3000/forums');
    lista.subscribe((resp: any) => {
        let forum: Forum = {
          id:           resp[0].id,
          name:         resp[0].name,
          description:  resp[0].description,
          picture:      resp[0].picture,
          position:     resp[0].position,
          id_category_fk: resp[0].id_category_fk   

        }         
    }); 
  }

I tried to do this but it didn’t work

 getById(id: number) {
    let lista = this.httpClient.get('http://localhost:3000/forums');
    let forum = Forum = {}
    lista.subscribe((resp: any) => {
        let forum: Forum = {
          id:           resp[0].id,
          name:         resp[0].name,
          description:  resp[0].description,
          picture:      resp[0].picture,
          position:     resp[0].position,
          id_category_fk: resp[0].id_category_fk   

        }         
    }); 
    return forum;
  }

how can I map my object? pd: I’m working with MySQL, NodeJS and Angular.
I know it isn’t the best code (I’m learning) so if someone corrects it I’d be grateful

I expected function to return me data as a Object

pd: this is my forum interface:

// To parse this data:
//
//   import { Convert } from "./file";
//
//   const forum = Convert.toForum(json);
//
// These functions will throw an error if the JSON doesn't
// match the expected interface, even if the JSON is valid.

export interface Forum {
    id:             number;
    name:           string;
    description:    string;
    picture:        string;
    position:       number;
    id_category_fk: number;
}

// Converts JSON strings to/from your types
// and asserts the results of JSON.parse at runtime
export class Convert {
    public static toForum(json: string): Forum[] {
        return cast(JSON.parse(json), a(r("Forum")));
    }

    public static forumToJson(value: Forum[]): string {
        return JSON.stringify(uncast(value, a(r("Forum"))), null, 2);
    }
}

function invalidValue(typ: any, val: any, key: any = ''): never {
    if (key) {
        throw Error(`Invalid value for key "${key}". Expected type ${JSON.stringify(typ)} but got ${JSON.stringify(val)}`);
    }
    throw Error(`Invalid value ${JSON.stringify(val)} for type ${JSON.stringify(typ)}`, );
}

function jsonToJSProps(typ: any): any {
    if (typ.jsonToJS === undefined) {
        const map: any = {};
        typ.props.forEach((p: any) => map[p.json] = { key: p.js, typ: p.typ });
        typ.jsonToJS = map;
    }
    return typ.jsonToJS;
}

function jsToJSONProps(typ: any): any {
    if (typ.jsToJSON === undefined) {
        const map: any = {};
        typ.props.forEach((p: any) => map[p.js] = { key: p.json, typ: p.typ });
        typ.jsToJSON = map;
    }
    return typ.jsToJSON;
}

function transform(val: any, typ: any, getProps: any, key: any = ''): any {
    function transformPrimitive(typ: string, val: any): any {
        if (typeof typ === typeof val) return val;
        return invalidValue(typ, val, key);
    }

    function transformUnion(typs: any[], val: any): any {
        // val must validate against one typ in typs
        const l = typs.length;
        for (let i = 0; i < l; i++) {
            const typ = typs[i];
            try {
                return transform(val, typ, getProps);
            } catch (_) {}
        }
        return invalidValue(typs, val);
    }

    function transformEnum(cases: string[], val: any): any {
        if (cases.indexOf(val) !== -1) return val;
        return invalidValue(cases, val);
    }

    function transformArray(typ: any, val: any): any {
        // val must be an array with no invalid elements
        if (!Array.isArray(val)) return invalidValue("array", val);
        return val.map(el => transform(el, typ, getProps));
    }

    function transformDate(val: any): any {
        if (val === null) {
            return null;
        }
        const d = new Date(val);
        if (isNaN(d.valueOf())) {
            return invalidValue("Date", val);
        }
        return d;
    }

    function transformObject(props: { [k: string]: any }, additional: any, val: any): any {
        if (val === null || typeof val !== "object" || Array.isArray(val)) {
            return invalidValue("object", val);
        }
        const result: any = {};
        Object.getOwnPropertyNames(props).forEach(key => {
            const prop = props[key];
            const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined;
            result[prop.key] = transform(v, prop.typ, getProps, prop.key);
        });
        Object.getOwnPropertyNames(val).forEach(key => {
            if (!Object.prototype.hasOwnProperty.call(props, key)) {
                result[key] = transform(val[key], additional, getProps, key);
            }
        });
        return result;
    }

    if (typ === "any") return val;
    if (typ === null) {
        if (val === null) return val;
        return invalidValue(typ, val);
    }
    if (typ === false) return invalidValue(typ, val);
    while (typeof typ === "object" && typ.ref !== undefined) {
        typ = typeMap[typ.ref];
    }
    if (Array.isArray(typ)) return transformEnum(typ, val);
    if (typeof typ === "object") {
        return typ.hasOwnProperty("unionMembers") ? transformUnion(typ.unionMembers, val)
            : typ.hasOwnProperty("arrayItems")    ? transformArray(typ.arrayItems, val)
            : typ.hasOwnProperty("props")         ? transformObject(getProps(typ), typ.additional, val)
            : invalidValue(typ, val);
    }
    // Numbers can be parsed by Date but shouldn't be.
    if (typ === Date && typeof val !== "number") return transformDate(val);
    return transformPrimitive(typ, val);
}

function cast<T>(val: any, typ: any): T {
    return transform(val, typ, jsonToJSProps);
}

function uncast<T>(val: T, typ: any): any {
    return transform(val, typ, jsToJSONProps);
}

function a(typ: any) {
    return { arrayItems: typ };
}

function u(...typs: any[]) {
    return { unionMembers: typs };
}

function o(props: any[], additional: any) {
    return { props, additional };
}

function m(additional: any) {
    return { props: [], additional };
}

function r(name: string) {
    return { ref: name };
}

const typeMap: any = {
    "Forum": o([
        { json: "id", js: "id", typ: 0 },
        { json: "name", js: "name", typ: "" },
        { json: "description", js: "description", typ: "" },
        { json: "picture", js: "picture", typ: "" },
        { json: "position", js: "position", typ: 0 },
        { json: "id_category_fk", js: "id_category_fk", typ: 0 },
    ], false),
};

Solution

In your Service, you should return Observable<Forum> as below:

Service

import { map } from 'rxjs';

getById(id: number): Observable<Forum> {
  return this.httpClient.get<Forum[]>('http://localhost:3000/forums')
    .pipe(
      map((resp: Forum[]) => resp[0])
    ); 
}

While to get the response data from getById method, you subscribe the observable so the observable event is triggered as below:

this.service.getById(id)
  .subscribe((data: Forum) => {
    // Implementation
  });

Answered By – Yong Shun

Answer Checked By – Marilyn (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *