Remote Data

In Data Basics, you learned how to add local data to the grid, both inline and via Javascript. 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.

[src] Attribute

ZingGrid provides the src attribute instead of 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:

  • You can add the src attribute to the <zing-grid> tag. This is the simplest and least flexible version.

    CloseCopy Copied
    <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. 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.

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

    You can read about the markup elements <zg-data> and <zg-param> in the Component Basics section.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Local File

Targeting a local json file is the same as above. Just add the path to the src attribute.

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

Remote JSON

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

CloseCopy Copied
{
  "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 attribute to <zg-param>.

CloseCopy Copied
<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>

For full details on using <zg-data> and <zg-param>, check out the list of attributes here.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Dynamic Endpoint

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

CloseCopy Copied
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));
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Moving Forward

You now understand the basics of remote data assignment. If you want to learn more about features in ZingGrid read our getting started with adding features. If you think you are ready to start styling your grid read our getting started with styling.

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading