Prism · Real world

An API response, for a screen

A response with paging and bookkeeping around its records becomes the smaller document a screen reads.

The source

{
  response: {
    meta: { total: 3, page: 1, perPage: 10 },
    data: [
      {
        id: 'user_001',
        attributes: {
          displayName: 'Ada Lovelace',
          email: '[email protected]',
          avatarUrl: '/avatars/ada.png',
        },
        permissions: { canEdit: true, canDelete: false },
      },
      {
        id: 'user_002',
        attributes: {
          displayName: 'Grace Hopper',
          email: '[email protected]',
          avatarUrl: '/avatars/grace.png',
        },
        permissions: { canEdit: true, canDelete: true },
      },
      {
        id: 'user_003',
        attributes: {
          displayName: 'Linus Torvalds',
          email: '[email protected]',
          avatarUrl: '/avatars/linus.png',
        },
        permissions: { canEdit: false, canDelete: false },
      },
    ],
  },
}

The config

{
  total: { $ref: '$.response.meta.total' },
  users: {
    $map: {
      over: { $ref: '$.response.data' },
      as: 'u',
      body: {
        id: { $get: { from: { $var: 'u' }, path: ['id'] } },
        name: {
          $get: {
            from: { $var: 'u' },
            path: ['attributes', 'displayName'],
          },
        },
        email: {
          $get: { from: { $var: 'u' }, path: ['attributes', 'email'] },
        },
        avatar: {
          $get: {
            from: { $var: 'u' },
            path: ['attributes', 'avatarUrl'],
          },
        },
        isAdmin: {
          $get: {
            from: { $var: 'u' },
            path: ['permissions', 'canDelete'],
          },
        },
      },
    },
  },
}

What comes out

{
  total: 3,
  users: [
    {
      id: 'user_001',
      name: 'Ada Lovelace',
      email: '[email protected]',
      avatar: '/avatars/ada.png',
      isAdmin: false,
    },
    {
      id: 'user_002',
      name: 'Grace Hopper',
      email: '[email protected]',
      avatar: '/avatars/grace.png',
      isAdmin: true,
    },
    {
      id: 'user_003',
      name: 'Linus Torvalds',
      email: '[email protected]',
      avatar: '/avatars/linus.png',
      isAdmin: false,
    },
  ],
}

Output matches the expected value

Runs in this page on the installed package. The input and the expected output are defined by the example.