JSON server

JSON Server offers us a lot more useful functionalities than the ones we discussed in the previous topic. We'll talk you through the most common ones.

Starting db.json

For our examples we'll use the following db.json. It's nothing more than a database for a to-do application with 3 collections:

• lists (our to do list items)
• items (our to do items, who belong to a list)
• statuses (the status of a to do item)

{
  "lists": [
    {
      "id": 1,
      "name": "School",
      "color": "#afdeee",
      "textcolor": "#000000"
    },
    {
      "id": 2,
      "name": "Home",
      "color": "#eab48d",
      "textcolor": "#000000"
    }
  ],
  "items": [
    {
      "id": 1,
      "listId": 1,
      "title": "Cisco assignment",
      "description": "Chapter test 2",
      "date": "2021-10-30T22:00:00.000Z",
      "statusId": 1,
      "order": 1
    },
    {
      "id": 2,
      "listId": 2,
      "title": "Cleaning",
      "description": "The windows need some cleaning",
      "date": "2021-10-26T22:00:00.000Z",
      "statusId": 1,
      "order": 1
    },
    {
      "id": 3,
      "listId": 1,
      "title": "Mobile Development",
      "description": "Deadline to upload project description and team",
      "date": "2021-10-24T22:00:00.000Z",
      "statusId": 1,
      "order": 2
    }
  ],
  "statuses": [
    {
      "id": 1,
      "name": "ongoing"
    },
    {
      "id": 2,
      "name": "done"
    }
  ]
}

Sort

Add _sort and _order (ascending order by default) to the url

• http://localhost:3000/lists?_sort=id&_order=asc

  • Returns the to do lists (from the lists collection) ordered by id, asc

    [
      {
        "id": 1,
        "name": "School",
        "color": "#afdeee",
        "textcolor": "#000000"
      },
      {
        "id": 2,
        "name": "Home",
        "color": "#eab48d",
        "textcolor": "#000000"
      }
    ]
  

• http://localhost:3000/lists?_sort=color&_order=desc

  • Returns the to do lists (from the lists collection) ordered by color, desc

    [
      {
        "id": 2,
        "name": "Home",
        "color": "#eab48d",
        "textcolor": "#000000"
      },
      {
        "id": 1,
        "name": "School",
        "color": "#afdeee",
        "textcolor": "#000000"
      }
    ]
  

Filter

• Case sensitive!
• http://localhost:3000/lists?name=Home
  • Returns the to do lists with name = Home

  [
    {
      "id": 2,
      "name": "Home",
      "color": "#eab48d",
      "textcolor": "#000000"
    }
  ]
  

Include relational data

Naming conventions

• There are naming conventions for the FK and collection: listId & lists, itemId & items, categoryId & categories, ...

Expand

• To include the parent resource, add _expand
• http://localhost:3000/items?_expand=list
  • Returns the to do items and the to do list object within the item

  [
    {
      "id": 1,
      "listId": 1,
      "title": "Cisco assignment",
      "description": "Chapter test 2",
      "date": "2021-10-30T22:00:00.000Z",
      "statusId": 1,
      "order": 1,
      "list": {
        "id": 1,
        "name": "School",
        "color": "#afdeee",
        "textcolor": "#000000"
      }
    },
    {
      "id": 2,
      "listId": 2,
      "title": "Cleaning",
      "description": "The windows need some cleaning",
      "date": "2021-10-26T22:00:00.000Z",
      "statusId": 1,
      "order": 1,
      "list": {
        "id": 2,
        "name": "Home",
        "color": "#eab48d",
        "textcolor": "#000000"
      }
    },
    {
      "id": 3,
      "listId": 1,
      "title": "Mobile Development",
      "description": "Deadline to upload project description and team",
      "date": "2021-10-24T22:00:00.000Z",
      "statusId": 1,
      "order": 2,
      "list": {
        "id": 1,
        "name": "School",
        "color": "#afdeee",
        "textcolor": "#000000"
      }
    }
  ]
  

Embed

• To include the children resources, add _embed
• http://localhost:3000/lists?_embed=items
  • Returns the to do lists and include the to do list items objects

  [
    {
      "id": 1,
      "name": "School",
      "color": "#afdeee",
      "textcolor": "#000000",
      "items": [
        {
          "id": 1,
          "listId": 1,
          "title": "Cisco assignment",
          "description": "Chapter test 2",
          "date": "2021-10-30T22:00:00.000Z",
          "statusId": 1,
          "order": 1
        },
        {
          "id": 3,
          "listId": 1,
          "title": "Mobile Development",
          "description": "Deadline to upload project description and team",
          "date": "2021-10-24T22:00:00.000Z",
          "statusId": 1,
          "order": 2
        }
      ]
    },
    {
      "id": 2,
      "name": "Home",
      "color": "#eab48d",
      "textcolor": "#000000",
      "items": [
        {
          "id": 2,
          "listId": 2,
          "title": "Cleaning",
          "description": "The windows need some cleaning",
          "date": "2021-10-26T22:00:00.000Z",
          "statusId": 1,
          "order": 1
        }
      ]
    }
  ]