Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to parse a JSON object to a TypeScript Object

I am currently trying to convert my received JSON Object into a TypeScript class with the same attributes and I cannot get it to work. What am I doing wrong?

Employee Class

export class Employee{     firstname: string;     lastname: string;     birthdate: Date;     maxWorkHours: number;     department: string;     permissions: string;     typeOfEmployee: string;     note: string;     lastUpdate: Date; } 

Employee String

{     "department": "<anystring>",     "typeOfEmployee": "<anystring>",     "firstname": "<anystring>",     "lastname": "<anystring>",     "birthdate": "<anydate>",     "maxWorkHours": <anynumber>,     "username": "<anystring>",     "permissions": "<anystring>",     "lastUpdate": "<anydate>"     //I will add note later } 

My Attempt

let e: Employee = new Employee();  Object.assign(e, {     "department": "<anystring>",     "typeOfEmployee": "<anystring>",     "firstname": "<anystring>",     "lastname": "<anystring>",     "birthdate": "<anydate>",     "maxWorkHours": 3,     "username": "<anystring>",     "permissions": "<anystring>",     "lastUpdate": "<anydate>" });  console.log(e); 

Link to Typescript Playground

like image 315
moessi774 Avatar asked Nov 04 '16 11:11

moessi774


People also ask

How do I parse a JSON in TypeScript?

const value = pick(JSON. parse('{"name": "Bob", "error": false}'), { name: String, error: Boolean, }); Now value will be typed, since String and Boolean are both "transformers" in the sense they take input and return a typed output. Furthermore, the value will actually be that type.

How do you parse an object in TypeScript?

To parse a JSON object to a TypeScript object, we use the JSON. parse method. interface Employee { departmentId: number; permissionsId: number; maxWorkHours: number; employeeId: number; firstName: string; lastName: string; } const jsonObj: any = JSON.

How do I cast a JSON object to a TypeScript interface?

You will just have to construct your Typescript object passing the json data in the constructor. In your ajax callback, you receive a company: onReceiveCompany( jsonCompany : any ) { let newCompany = new Company( jsonCompany ); // call the methods on your newCompany object ... }

How would you define a JSON object in TypeScript?

We can create a JSON object in TYPESCRIPT dynamically. There are two types of objects in TypeScript. A Plain Object that we achieve with json. parse() which results in the plain object, and the TypeScript Class, which returns the Class Object.


1 Answers

If you use a TypeScript interface instead of a class, things are simpler:

export interface Employee {     typeOfEmployee_id: number;     department_id: number;     permissions_id: number;     maxWorkHours: number;     employee_id: number;     firstname: string;     lastname: string;     username: string;     birthdate: Date;     lastUpdate: Date; }  let jsonObj: any = JSON.parse(employeeString); // string to generic object first let employee: Employee = <Employee>jsonObj; 

If you want a class, however, simple casting won't work. For example:

class Foo {     name: string;     public pump() { } }  let jsonObj: any = JSON.parse('{ "name":"hello" }'); let fObj: Foo = <Foo>jsonObj; fObj.pump(); // crash, method is undefined! 

For a class, you'll have to write a constructor which accepts a JSON string/object and then iterate through the properties to assign each member manually, like this:

class Foo {     name: string;      constructor(jsonStr: string) {         let jsonObj: any = JSON.parse(jsonStr);         for (let prop in jsonObj) {             this[prop] = jsonObj[prop];         }     } }  let fObj: Foo = new Foo(theJsonString); 
like image 83
rodrigocfd Avatar answered Oct 14 '22 03:10

rodrigocfd