jsonapi-parser-ts

A lightweight parser for JSON:API response format.

Installation

npm install jsonapi-parser-ts --save

# or

yarn add jsonapi-parser-ts

Example

Assume we have response like this below

{
  data: [
    {
      type: 'articles',
      id: '1',
      attributes: {
        title: 'JSON:API paints my bikeshed!',
      },
      relationships: {
        author: {
          data: { type: 'people', id: '9' },
        },
        comments: {
          data: [
            { type: 'comments', id: '5' },
            { type: 'comments', id: '12' },
          ],
        },
      },
    },
  ],
  included: [
    {
      type: 'people',
      id: '9',
      attributes: {
        firstName: 'Dan',
        lastName: 'Gebhardt',
        twitter: 'dgeb',
      },
      relationships: {
        addresses: {
          data: [
            { type: 'addresses', id: '1' },
          ],
        },
      },
    },
    {
      type: 'comments',
      id: '5',
      attributes: {
        body: 'First!',
      },
      relationships: {
        author: {
          data: { type: 'people', id: '2' },
        },
      },
    },
    {
      type: 'comments',
      id: '12',
      attributes: {
        body: 'I like XML better',
      },
      relationships: {
        author: {
          data: { type: 'people', id: '9' },
        },
      },
    },
    {
      type: 'addresses',
      id: '1',
      attributes: {
        street: 'Avenue Q',
      },
    },
  ],
}

• Parse response as flatten

import parseJsonApi from 'jsonapi-parser';

interface IResponseProps {
  articles: {
    [key: string]: {
      id: string;
      title: string;
      author: string;
      comments: string[];
    };
  };
  people: {
    [key: string]: {
      id: string;
      firstName: string;
      lastName: string;
      twitter: string;
      addresses: string[];
    };
  };
  comments: {
    [key: string]: {
      id: string;
      body: string;
      author: string;
    };
  };
  addresses: {
    [key: string]: {
      id: string;
      street: string;
    };
  };
}

parseJsonApi<IResponseProps>(response);

// or

parseJsonApi<IResponseProps>(response, { mode: 'flatten' });

// result will be

// {
//   articles: {
//     1: {
//       id: '1',
//       title: 'JSON:API paints my bikeshed!',
//       author: '9',
//       comments: ['5', '12'],
//     },
//   },
//   people: {
//     9: {
//       id: '9',
//       firstName: 'Dan',
//       lastName: 'Gebhardt',
//       twitter: 'dgeb',
//       addresses: ['1'],
//     },
//   },
//   comments: {
//     5: {
//       id: '5',
//       body: 'First!',
//       author: '2',
//     },
//     12: {
//       id: '12',
//       body: 'I like XML better',
//       author: '9',
//     },
//   },
//   addresses: {
//     1: {
//       id: '1',
//       street: 'Avenue Q',
//     },
//   },
// }

• Parse response as mapping

import parseJsonApi from 'jsonapi-parser';

interface IResponseProps {
  articles: {
    id: string;
    title: string;
    author: {
      id: string;
      firstName: string;
      lastName: string;
      twitter: string;
      addresses: {
        id: string;
        street: string;
      }[];
    };
    comments: {
      id: string;
      body: string;
      author: {
      id: string;
      firstName: string;
      lastName: string;
      twitter: string;
      addresses: {
        id: string;
        street: string;
      }[];
    }[];
  }[];
}

parseJsonApi<IResponseProps>(response, { mode: 'mapping' });

// result will be

// [
//   {
//     id: '1',
//     title: 'JSON:API paints my bikeshed!',
//     author: {
//       id: '9',
//       firstName: 'Dan',
//       lastName: 'Gebhardt',
//       twitter: 'dgeb',
//       addresses: [
//         {
//           id: '1',
//           street: 'Avenue Q',
//         },
//       ],
//     },
//     comments: [
//       {
//         id: '5',
//         body: 'First!',
//       },
//       {
//         id: '12',
//         body: 'I like XML better',
//         author: {
//           id: '9',
//           firstName: 'Dan',
//           lastName: 'Gebhardt',
//           twitter: 'dgeb',
//           addresses: [
//             {
//               id: '1',
//               street: 'Avenue Q',
//             },
//           ],
//         },
//       },
//     ],
//   },
// ]

TODO

• improve type for typescript
• parse with links, meta attributes