Remote Data

In the Data Basics guide, you learned how to add local data to the grid, both inline and via JavaScript. But, what if your data is in a database with an endpoint? What if your data is updating? You'll need to connect to it a little differently. In this guide, we'll walk you through the different ways you can connect to remote data.

Prefer video tutorials? Check out our quick video guide below:

src Attribute

ZingGrid provides the src attribute instead of the data attribute to get data from a remote source and display it. Using the src attribute makes an AJAX request internally to fetch your data. The path can be a relative or remote URL.

There are two ways to implement this attribute:

• The simplest but least flexible way is to add the src attribute to the <zing-grid> tag, like so:

  <zing-grid
    src="https://cdn.zinggrid.com/datasets/remote-data.json">
  </zing-grid>

• The most flexible method is to add the src attribute to the <zg-data> tag (see below). This is more flexible because you can nest zg-param tags to adjust actions of your src endpoint. We will go over this in the next section.

  <zing-grid>
    <zg-data src="https://cdn.zinggrid.com/datasets/remote-data.json"></zg-data>
  </zing-grid>

src Attribute Grid

Here is our complete grid with the src attribute on <zg-data>:

Local File

Targeting a local JSON file is the same process as above; just add the path to the src attribute, like so:

<zing-grid>
  <zg-data src="/path/to/local/file.json"></zg-data>
</zing-grid>

Remote JSON

For simple or straightforward data structures, the src attribute is sufficient. A more complex (and realistic) example is hitting an endpoint you do NOT have control of. Consider the following data structure:

{
  "company": {
    "name": "Planet Express",
    "employees": [
      {
        "name": "Philip J. Fry",
        "actor": "Billy West",
        "job": "Delivery Boy",
        "origin": "Earth",
        "gender": "male",
        "species": "Human"
      } ...
    ]
  }
}

The default src fetch will only try to access the top-level company property. What if instead, we wanted to list data starting from the company.employees level? Simple – we add the recordPath parameter value to <zg-param>, like so:

<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data-recordpath.json">
    <zg-param name="recordPath" value="company.employees"></zg-param>
  </zg-data>
</zing-grid>

Remote JSON Data Grid

Here is our complete grid pulling in data from a remote JSON and displaying data from the company.employees level:

Dynamic Endpoint

It is common to have an endpoint, or file, that is changing. You can easily just poll that endpoint with an interval and update your grid through the setData() API method, like so:

const zgRef = document.querySelector('zing-grid');
fetch('https://cdn.zinggrid.com/datasets/remote-data-recordpath.json')
  .then(res => res.json())
  .then(data => zgRef.setData(data))
  .catch(err => console.error('--- Error In Fetch Occurred ---', err));

Dynamic Data Grid

Here is our complete grid displaying dynamic data:

Moving Forward

You now understand the basics of remote data assignment. If you want to learn more about features in ZingGrid, read our Adding Features guide. If you think you are ready to start styling your grid, read our Styling Basics guide.