Creating a data grid with a remote endpoint using ZingGrid
Tags: javascript, html, tutorial, webdev
Published: 2019-03-13 19:23:56

---
title: Creating a data grid with a remote endpoint using ZingGrid
published: true
description: Learn how to assign remote data sources to your data grids and tables using the ZingGrid JavaScript library
tags: javascript, html, tutorial, html, webdev
cover_image: https://firebasestorage.googleapis.com/v0/b/zinggrid-marketing.appspot.com/o/emails%2Fgetting-started-1%2Fblog-banner-3.png?alt=media&token=c22df469-6011-4ffe-b1a9-d9f4501ddceb
---

[In my last post](https://dev.to/zinggrid/get-started-with-data-basics-in-zinggrid-726), I covered data basics in the [ZingGrid](http://zinggrid.com) JavaScript library for data grids and data tables. Today, I'll show you how to connect remote data sources to ZingGrid. Check out the [video tutorial](https://www.youtube.com/watch?v=wKAvQyog5Ac) to see how it’s done, or follow along with me in this written tutorial.
{% youtube wKAvQyog5Ac %}
The three main things you'll learn about in this post are:
1. The `[src]` attribute
2. Remote JSON data
3. Dynamic endpoints

You can use your own remote dataset to follow along, but we've also provided the following remote endpoint for you to use, too: https://cdn.zinggrid.com/datasets/remote-data.json

---

## The [src] Attribute
ZingGrid provides the `src` attribute to get data from a remote source and display it. You can use either a relative path or a remote URL. When you use the `src` attribute, an AJAX request is made internally to fetch your data.

The `src` attribute can be implemented in two different ways:
1. Using the top-level `<zing-grid>` tag
2. Using the `<zg-data>` tag

#### Using the top-level `<zing-grid>` tag
The simplest way to use the `src` attribute is to add it to the top-level `<zing-grid>` tag like this:
```
<zing-grid
  src="https://cdn.zinggrid.com/datasets/remote-data.json">
</zing-grid>
```
#### Using the `<zg-data>` tag
The more robust way to use the `src` attribute involves adding it to the `<zg-data>` tag. This method allows you to nest `<zg-param>` tags within `<zg-data>` so you can adjust the actions of your `src` endpoint. This is what the syntax for `<zg-data>` looks like:
```
<zing-grid>
  <zg-data src="https://cdn.zinggrid.com/datasets/remote-data.json"></zg-data>
</zing-grid>
```
Here's a live example of a data grid using `<zg-data>`:
{% codepen https://codepen.io/zinggrid/pen/ZPaxJE %}
Learn more about the markup elements `<zg-data>` and `<zg-param>` in [our docs](https://www.zinggrid.com/docs/component-basics).

---

## Remote JSON
The `src` attribute works for most simple and straightforward data structures. However, datasets aren't always that simple, and you might not always be connecting to an endpoint you control. 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 you wanted to list data starting from the `company.employees` level? In that case you would want to add the `recordPath` attribute to `<zg-param>` like this:
```
<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>
```
Here's a live example of `recordPath` in action:
{% codepen https://codepen.io/zinggrid/pen/xBPWXE %}

To learn more about using `<zg-data>` and `<zg-param>`, check out the [list of available attributes](https://www.zinggrid.com/docs/api-elements#zg-param) in ZingGrid.

---

## Dynamic Endpoint
So far I've shown you how to connect static endpoints to ZingGrid, but what if you want to connect to a dynamic endpoint with data that changes? All you need to do is poll that endpoint with an interval and update your grid via the `setData()` API method.
```
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));
```
This is what a demo with a dynamic endpoint looks like:
{% codepen https://codepen.io/zinggrid/pen/QoOmOP %}

---

And there you have it – that's the gist of connecting to remote data sources in ZingGrid. I hope you found this helpful – any feedback is appreciated! Look out for the next tutorial in this series if you're interested in learning how to customize columns in ZingGrid 🖖