json2entity

json2entity

In SPA application (single page application) we use data sources are obtained from API server, usually we use it directly. This library provide simple way to transform api data to custom typescript entity class - the reverse process is also possible. In other words, we can easily carry out the serialization / deserialization process.

Installation

 npm install json2entity --save

Add to tsconfig.json

{
  "compilerOptions": {
    [...]
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    [...]
}

Run test

git clone https://github.com/lunargorge/json2entity.git
cd json2entity
npm install
npm run test

Example

Mock data.

export const personObj = {
    name: 'Rodric',
    surname: 'Brave',
    emailPrivate: {id: 1, value: '[e-mail]'},
    emailBusiness: {id: 2, value: '[e-mail]'},
    phones: [
        {id: 1, prefix: '+55', value: '123123123'},
        {id: 2, prefix: '+56', value: '234234234'}
    ],
    addresses: [
        {
            id: 1,
            type: 1,
            city: {
                id: 2,
                value: 'Belfaxt'
            },
            street: {
                id: 1,
                value: 'Paradise Street'
            }
        },
        {
            id: 2,
            type: 2,
            city: {
                id: 4,
                value: 'Bristol'
            },
            street: {
                id: 3,
                value: 'Broad Street'
            }
        }
    ]
};

export const personJson = JSON.stringify(personObj);

Create person.entity.ts file

import { Serializer, ArrayCollection } from 'json2entity';

import { AddressEntity } from './address.entity';
import { PhoneEntity } from './phone.entity';
import { ItemEntity } from './item.entity';

export class PersonEntity {
    @Serializer()
    public name: string;

    @Serializer()
    public surname: string;

    @Serializer({type: ItemEntity})
    public emailPrivate: ItemEntity;

    @Serializer({type: ItemEntity})
    public emailBusiness: ItemEntity;

    @Serializer({type: [PhoneEntity]})
    public phones: ArrayCollection<PhoneEntity>;

    // You can use public getter and setter.
    @Serializer({name: 'addresses', type: [AddressEntity]})
    private _addresses: ArrayCollection<AddressEntity>;

    set addresses(v: ArrayCollection<AddressEntity>) {
        this._addresses = v;
    }

    get addresses(): ArrayCollection<AddressEntity> {
        return this._addresses;
    }
}

Create item.entity.ts file

import { Serializer } from 'json2entity';

export class ItemEntity {
    @Serializer()
    public id: number;
    
    @Serializer()
    public value: string;
}

Create phone.entity.ts file

import { Serializer } from 'json2entity';

export class PhoneEntity {
    @Serializer()
    public id: number;
    
    @Serializer()
    public prefix: string;

    @Serializer()
    public value: string;
}

Create address.entity.ts file

import { Serializer } from 'json2entity';
import { ItemEntity } from './item.entity';

export class AddressEntity {
    @Serializer()
    public id: number;

    @Serializer()
    public type: number;
    
    @Serializer({type: ItemEntity})
    public city: ItemEntity;

    // You can use public getter and setter
    // source (english) street -> entity property (spanish) calle
    @Serializer({name: 'street', type: ItemEntity})
    private _calle: ItemEntity;

    set calle(v: ItemEntity) {
        this._calle = v;
    }

    get calle(): ItemEntity {
        return this._calle;
    }

}

import { Json2Entity, ArrayCollection } from 'json2entity';
import { PersonEntity } from './address.entity';

// personJson - JSON/"JS literal object"
let person: PersonEntity = (new Json2Entity()).process(personJson, new PersonEntity());

console.log('name: ' +  person.name);
console.log('surname: ' + person.surname);
console.log('emailPrivate.val: ' + person.emailPrivate.value);
console.log('emailBusiness.val: ' + person.emailBusiness.value);
console.log('phones.first().id: ' + person.phones.first().id);
console.log('phones.first().value: ' + person.phones.first().value);
console.log('phones.last().id: ' + person.phones.last().id);
console.log('phones.last().value: ' + person.phones.last().value);
console.log('phones.get(1).value: ' + person.phones.get(1).value);
console.log('addresses.first().id: ' + person.addresses.first().id);
console.log('addresses.first().calle.val: ' + person.addresses.first().calle.value);
console.log('addresses.first().city.val: ' + person.addresses.first().city.value);
console.log('addresses.last().id: ' + person.addresses.last().id);
console.log('addresses.last().calle.val: ' + person.addresses.last().calle.value);
console.log('addresses.last().city.val: ' + person.addresses.last().city.value);
console.log('addresses.get(1).id: ' + person.addresses.get(1).id);
console.log('addresses.get(1).calle.val: ' + person.addresses.get(1).calle.value);
console.log('addresses.get(1).city.val: ' + person.addresses.get(1).city.value);

Example - angular 5

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
class AppComponent implements OnInit {
    public person: PersonEntity;
    
    constructor(private http: HttpClient) {}
  
    ngOnInit(): void {
        this.http.get('<URL>').subscribe(data => {
            this.person = (new Json2Entity()).process(data, new PersonEntity());
    });
  }
}

Example - serialize/deserialize

Use data from the previous example

import { Json2Entity, Entity2Json, ArrayCollection } from 'json2entity';

// use ArrayCollection (default)
let person: PersonEntity = (new Json2Entity()).process(personJson, new PersonEntity());
let serializePerson  = (new Entity2Json()).process(person);

console.log(serializePerson);

console.log('===================');

// use Array instead ArrayCollection (In this case, also use arrays in the entities !)
let person2: PersonEntity = (new Json2Entity()).process(personJson, new PersonEntity(), true);
let serializePerson2  = (new Entity2Json()).process(person2);

console.log(serializePerson2)