REST

Data from a Local REST API

In this article, we will explore how to retrieve data from a local REST API. The examples below use json-server as our local REST server. Our database is a JSON file that contains objects that store user information like name, email, and phone number.

Note: For our JSON file to work with json-server, our objects need to have a key called "id", which will be used when making requests to the server.

Sample of data format

CloseCopy Copied
{
  "users": [
    {
      "first": "Diane",
      "last": "Murphy",
      "email": "",
      "id": "0"
    },
    {
      "first": "Gerald",
      "last": "Patterson",
      "email": "",
      "id": "1"
    },
    ...
  ]
}

We start a JSON server by running the command: json-server --watch users.json.

Then we can get the path to our database ("http://localhost:3000/users/"), and we set the src attribute of the <zing-grid> tag to this path.

CloseCopy Copied
<zing-grid src="http://localhost:3000/users/"></zing-grid>

CRUD Grid

Setting the source to a REST API route allows us to have a simple CRUD grid. You can create new rows, read from the given source, update cells or rows, and delete rows from the grid. Any changes to the grid will automatically be reflected in the database.

We need to specify the id key in order for our requests to work properly. To do so, we first have to include the <zg-data> element. We set the src attribute to the source of data and idKey to the key used to identify each row.

Note: In order to update cells/rows, you need to set the editor attribute for the grid. You can create/update/delete rows through the context menu, which appears after setting the context-menu attribute for the grid. You could also do this by using specific column types.

CloseCopy Copied
<zing-grid editor context-menu>
  <zg-data src="http://localhost:3000/users/" idKey="id"></zg-data>
</zing-grid>

Infinite Scroll

If we want to have infinite scroll, we first need to set the infinite attribute for our grid. We then need to set the limitToKey and pageKey objects in the options attribute for <zg-data>.

  • limitToKey is the query parameter that is used to specify the max amount of records to retrieve. If we look at the paginate section of the json-server README, we will see that "_limit" is used as the query parameter, so we will set limitToKey to "_limit".
  • pageKey is the query parameter used to specify the page. Similarly, we see that this should be set to "_page".
CloseCopy Copied
<zing-grid infinite>
  <zg-data
    src="http://localhost:3000/users/"
    options='{
      "limitToKey": "_limit",
      "pageKey": "_page"
    }'>
  </zg-data>
</zing-grid>

Sorting

In order to sort the data, we need to set the parameters sortByKey, sortBy, sortDirKey, and sortDir.

    sortByKey is the query parameter for sorting
    sortBy is the key that we want to sort on
    sortDirKey is the query parameter for the sorting direction
    sortDir is the sort direction

Looking at the sort section of the README, we see that sortByKey should be set to "_sort", and sortDirKey should be set to "_order".

In the example below, we will sort the data by the "first" property, and we will set the direction to be descending (Z-A).

CloseCopy Copied
<zing-grid>
    <zg-data src="http://localhost:3000/users/" options='{
      "sortByKey": "_sort",
      "sortBy": "first",
      "sortDirKey": "_order",
      "sortDir": "desc"
    }'>
  </zg-data>
</zing-grid>

<zg-param> Version

In the previous examples, we have been setting all of the key parameters using the options attribute on <zg-data>. Another way we could write this is using the <zg-param> tag.

Below, we have rewritten the sorting example:

CloseCopy Copied
<zing-grid>
  <zg-data>
    <zg-param name="sortByKey" value="_sort"></zg-param>
    <zg-param name="sortBy" value="first"></zg-param>
    <zg-param name="sortDirKey" value="_order"></zg-param>
    <zg-param name="sortDir" value="desc"></zg-param>
    <zg-param name="src" value="http://localhost:3000/users/"></zg-param>
  </zg-data>
</zing-grid>
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading