0

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),
};

1 Answer 1

0

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
  });
2
  • The property 'map' doesnt exist in type 'Observable'
    – Prieto
    Mar 26, 2022 at 4:06
  • Sorry about that, done update my answer, have to use .pipe(map()). While map is from rxjs.
    – Yong Shun
    Mar 26, 2022 at 4:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.