# json-apiformat-library

> Json API Formatter for Angular(Typescript) ## Getting Started Install JsonAPIFormmatter through npm: ```angular2html npm install --save ts-json-api-formatter ``` Json API resource is identified by the id/tid attribute when creating a typescript cla

Latest version **0.0.0** (published 2020-10-28) · 0 weekly downloads

## Install

```sh
npm install json-apiformat-library
pnpm add json-apiformat-library
yarn add json-apiformat-library
bun add json-apiformat-library
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2020-10-28 |
| First published | 2020-10-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | thakshila |

## Links

- npm: https://www.npmjs.com/package/json-apiformat-library
- npm.io page: https://npm.io/package/json-apiformat-library

## Dependencies (14)

- [rxjs](https://npm.io/package/rxjs.md) ~6.3.3
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.26
- [@angular/core](https://npm.io/package/@angular/core.md) ~7.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ~7.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~7.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ~7.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ~7.0.0
- [ngx-json-viewer](https://npm.io/package/ngx-json-viewer.md) ^2.4.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~7.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~7.0.0
- [ts-json-api-formatter](https://npm.io/package/ts-json-api-formatter.md) 1.0.2
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~7.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~7.0.0

## Recent versions

- 0.0.0 (latest) — 2020-10-28

## README

# Json API Format Converter for Angular

Json API Formatter for Angular(Typescript)
## Getting Started
Install JsonAPIFormmatter through npm:
```angular2html
npm install --save ts-json-api-formatter
```
Json API resource is identified by the id/tid attribute
when creating a typescript class, if that is a resource inherit that from base resource

Ex:
```typescript
import { BaseResource } from 'ts-json-api-formatter';
export class customer extends BaseResource
{
    public reference: string;  
    public name: string;
    public active: boolean;  
    public company:string;   
    public contacts: contact[];
    public addrress:address;
}
export class contact extends BaseResource
{
    public name: string;
    public phone: string;
    public email: string;
}
export class address
{
    public addressLine1: string;
    public addressLine2: string;
}

```
By default class name will be taken as the type, that can be overwrite by specifing value to type
```typescript
var obj=new customer();
 obj.id="1001";
 obj.name="Test Customer";
 obj.type="CorporateCustomer";
```

For serialize/deserialize import Serializer and Deserializer

```typescript
import { Serializer } from 'ts-json-api-formatter';
import { Deserializer } from 'ts-json-api-formatter';
```

Create the instance of serializer and call "serialize" method by passing type script object
```typescript
var obj=new customer();
 obj.id="1001";
 obj.name="Test Customer";
 var JsonAPIFormattedString=((new Serializer()).serialize(Obj));
```
For deserialization create the instance of Dezirializer and call the "deserialize" method by passing json api format string
```typescript
 var customerObj=((new Deserializer()).deserialize(JsonAPIFormattedString));
```
Example: 

```typescript
import { Component } from '@angular/core';
import { Deserializer, Serializer } from 'ts-json-api-formatter';
import {customer, address, contact} from 'src/models/customer'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'JsonAPIFormatLibrary';
  JsonObj={};
  JsonSerialized='';
  JsonDeserialized='';
  
  constructor(){
    var dummyCustomer=new customer();
    dummyCustomer.id="1001";
    dummyCustomer.type="CorporateCustomer";
    dummyCustomer.name="Test Customer";
    dummyCustomer.reference="CU1001";
    dummyCustomer.active=true;    

    dummyCustomer.addrress=new address();
    dummyCustomer.addrress.addressLine1="Address1";
    dummyCustomer.addrress.addressLine2="Address2";

    dummyCustomer.contacts=[];
    var cnt=new contact();
    cnt.id="2001" 
    cnt.name="test contact"
    cnt.email="testc@t.com"
    cnt.phone="071858965"
    dummyCustomer.contacts.push(cnt);

    var cnt2=new contact();
    cnt2.id="2002" 
    cnt2.name="test2 contact"
    cnt2.email="test2c@t.com"
    cnt2.phone="0114785258"
    dummyCustomer.contacts.push(cnt2);

    this.JsonObj=dummyCustomer;
    this.JsonSerialized=((new Serializer()).serialize(dummyCustomer));
    this.JsonDeserialized=((new Deserializer()).deserialize(this.JsonSerialized));
    }
}
```
```javascript
{
    "data":{
            "type":"CorporateCustomer",
            "id":"1001",
            "attributes":{
                "name":"Test Customer",
                "reference":"CU1001",
                "active":true,
                "addrress":{
                    "addressLine1":"Address1",
                    "addressLine2":"Address2"
                    }
                },
            "relationships":{
                "contacts":{
                    "data":[
                        {"id":"2001","type":"contact"},
                        {"id":"2002","type":"contact"}
                        ]
                        }
                    }
                },
            "included":[
                {
                "type":"contact",
                "id":"2001",
                "attributes":
                    {
                    "name":"test contact",
                    "email":"testc@t.com",
                    "phone":"071858965"
                    }
                },
                {
                "type":"contact",
                "id":"2002",
                "attributes":
                    {
                    "name":"test2 contact",
                    "email":"test2c@t.com",
                    "phone":"0114785258"
                    }
                }
                ]
                }
```
Serialized Output:


Deserialized Output(same serialized output is deserialized):

```json

{
    "name":"Test Customer",
    "reference":"CU1001",
    "active":true,
    "addrress":
        {
            "addressLine1":"Address1",
            "addressLine2":"Address2"
        },
    "id":"1001",
    "type":"CorporateCustomer",
    "contacts":[
        {"name":"test contact","email":"testc@t.com","phone":"071858965","id":"2001","type":"contact"},{"name":"test2 contact","email":"test2c@t.com","phone":"0114785258","id":"2002","type":"contact"}
        ]
    }
```
<p align="center">
  <img src="https://github.com/thashi85/AngularJsonAPIFormatter/blob/master/Json%20API%20format.jpg"  >
</p>

---
_Source: https://npm.io/package/json-apiformat-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._