Creating a Typescript object from a JSON file

Question

Creating a Typescript object from a JSON file

In my TypeScript app, I am utilizing API calls to retrieve objects. Specifically, I have a TypeScript User Object structured like this:

export class User {
    id : number;
    name : string;
    email : string;
}

Upon making the API call, the data returned looks like this:

{
    "id" : 3,
    "name" : "Jonn",
    "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d2d7d0d6f8ddc0d9d5c8d4dd96dbd7d5">[email protected]</a>"
}

I want to convert this JSON data into a User. Initially, I attempted this method:

let user : User = <User> myJson;

While I can successfully access properties of the user like user.name, the issue arises when trying to access methods within the User class. For example, if the User class contains a method such as:

getUppercaseName() : string {
    return this.name.toUpperCase();
}

The behavior observed is that while user.name returns John, attempting user.getUppercaseName() results in undefined.

What could be causing this discrepancy? And what would be the best approach to overcome this challenge?

json angular typescript

Answer 1

Answer №1

Your approach involves treating classes as interfaces, which essentially means you are defining the structure without implementing it:

export interface User {
    id : number;
    name : string;
    email : string;
}

The reason why using classes in this manner doesn't raise any issues with the compiler is because:

TypeScript's type-checking principle revolves around the shape of values, a concept known as "duck typing" or "structural subtyping"

(learn more about duck typing)

This can be illustrated with an example:

class User {
    id: number;
    name: string;
    email: string;

    constructor(id: number, name: string, email: string) {
        this.id = id;
        this.name = name;
        this.email = email;
    }
}

function logUser(user: User) {
    console.log(`user id: ${ user.id }, name: ${ user.name }, email: ${ user.email }`);
}

logUser({
    id: 1,
    name: "user 1",
    email: "mailaddress"
});

logUser(new User(2, "user 2", "anotheraddress"));

In both calls to logUser, objects that adhere to the interface of the User class are passed.

If you prefer working with instances of the class rather than object literals, you can do so like this:

new User(myJson.id, myJson.name, myJson.email);

You could also define an interface and implement it within the class for a similar effect:

interface IUser {
    id: number;
    name: string;
    email: string;
}

class User implements IUser {
    id: number;
    name: string;
    email: string;

    constructor(data: IUser) {
        this.id = data.id;
        this.name = data.name;
        this.email = data.email;
    }
}

...
new User(myJson);

Answer 2

Your approach involves treating classes as interfaces, which essentially means you are defining the structure without implementing it:

export interface User {
    id : number;
    name : string;
    email : string;
}

The reason why using classes in this manner doesn't raise any issues with the compiler is because:

TypeScript's type-checking principle revolves around the shape of values, a concept known as "duck typing" or "structural subtyping"

(learn more about duck typing)

This can be illustrated with an example:

class User {
    id: number;
    name: string;
    email: string;

    constructor(id: number, name: string, email: string) {
        this.id = id;
        this.name = name;
        this.email = email;
    }
}

function logUser(user: User) {
    console.log(`user id: ${ user.id }, name: ${ user.name }, email: ${ user.email }`);
}

logUser({
    id: 1,
    name: "user 1",
    email: "mailaddress"
});

logUser(new User(2, "user 2", "anotheraddress"));

In both calls to logUser, objects that adhere to the interface of the User class are passed.

If you prefer working with instances of the class rather than object literals, you can do so like this:

new User(myJson.id, myJson.name, myJson.email);

You could also define an interface and implement it within the class for a similar effect:

interface IUser {
    id: number;
    name: string;
    email: string;
}

class User implements IUser {
    id: number;
    name: string;
    email: string;

    constructor(data: IUser) {
        this.id = data.id;
        this.name = data.name;
        this.email = data.email;
    }
}

...
new User(myJson);

Answer 3

Answer №2

Nitzan already went over the theory behind this concept, so I'll present an alternative strategy:

interface PersonalInfo {
   id: number;
   fullName: string;
   emailAddress: string;
}

class Person {
   personalInfo: PersonalInfo;
   constructor(personalInfo: PersonalInfo) {
       this.personalInfo = personalInfo;
   }
   displayFullNameInUpperCase(): string {
       return this.personalInfo.fullName.toLocaleUpperCase();
   }
}

const userData = {
   id: 4,
   fullName: "Alice Doe",
   emailAddress: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46757171677a737c6e7773777b">[email protected]</a>"
}

let individual: Person = new Person(userData);

Answer 4

Nitzan already went over the theory behind this concept, so I'll present an alternative strategy:

interface PersonalInfo {
   id: number;
   fullName: string;
   emailAddress: string;
}

class Person {
   personalInfo: PersonalInfo;
   constructor(personalInfo: PersonalInfo) {
       this.personalInfo = personalInfo;
   }
   displayFullNameInUpperCase(): string {
       return this.personalInfo.fullName.toLocaleUpperCase();
   }
}

const userData = {
   id: 4,
   fullName: "Alice Doe",
   emailAddress: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46757171677a737c6e7773777b">[email protected]</a>"
}

let individual: Person = new Person(userData);

Answer 5

Answer №3

When dealing with a User object that has 50 or more properties, there can be some challenges...

To address this issue, consider adding a constructor to your User object that extends your JSON object.

export class User {
    constructor( jsonData: any )
    {
      $.extend(this, jsonData);
    }
    id : number;
    name : string;
    email : string;
    getUpperCaseName() {...}
}

When making an ajax callback, you can create a new User object from the received JSON data:

let newUser = new User( jsonUserData );
let userName = newUser.getUpperCaseName();

For a detailed explanation of this solution, check out this helpful post.

Answer 6

When dealing with a User object that has 50 or more properties, there can be some challenges...

To address this issue, consider adding a constructor to your User object that extends your JSON object.

export class User {
    constructor( jsonData: any )
    {
      $.extend(this, jsonData);
    }
    id : number;
    name : string;
    email : string;
    getUpperCaseName() {...}
}

When making an ajax callback, you can create a new User object from the received JSON data:

let newUser = new User( jsonUserData );
let userName = newUser.getUpperCaseName();

For a detailed explanation of this solution, check out this helpful post.

Creating a Typescript object from a JSON file

Answer №1

Answer №2

Answer №3

Similar questions

Transform the data attributes into a list without any specific order

Issue with Django and Angular 4 - The requested resource is missing the 'Access-Control-Allow-Origin' header

Storing data asynchronously in Angular 4

Inquiring about a particular key-value in a buffer variable in GoLang

changing quot to &quot within the MVC framework

Is there a way to convert an Xml raw string into Xml or Json Output Format?

Tips for guaranteeing the shortest possible period of operation

Loading JSON Data into Table

What could be the cause of this malfunction in the Angular Service?

Setting up Zurb Foundation in a VueJS TypeScript project: Step-by-step guide

Subscription Code Incrementally Triggering Upon Each Component Load

Query: Is there a way to search for a key that is a numerical string saved in a variable in jq?

Error in versionName for Nativescript 7 or later

Issue with service being undefined upon refreshing an Angular 9 application that includes a resolver in its routing logic

Performing a MySQL query that utilizes JSON data objects

Javascript - Implement validation pattern requiring a minimum of one character that is not a space

Using CodeIgniter's AJAX and JSON functionality, dynamically change the color of a div based on the

What properties are missing from Three.js Object3D - isMesh, Material, and Geometry?

Angular 4 Form remains valid even when an incorrect value is entered

Enhanced support for Vuex store in Visual Studio Code