---
title: "Remote Data | Docs"
description: "Explore the different ways to connect to remote data using the [src] attribute, local file, remote JSON data or by using an external fetch request."
url: https://www.zinggrid.com/docs/getting-started/remote-data
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/getting-started/remote-data.md
mode: provenance
representation: markdown
origin_response_id: 886ffc6cd0835261ef9181338126e042
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.712Z
version_nonce: 91259dca8fc622fe0fce754db6a3f6d1
generated_at_utc: 2026-10-23T02:07:18.957Z
response_nonce: e441f301af1b93dc37067b80a200e9d2
```

# Remote Data

In [the Data Basics guide](https://www.zinggrid.com/docs/data-basics), 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.

[Youtube demo video](https://www.youtube.com/embed/wKAvQyog5Ac)

## `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:

  ```html
  <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.

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

> **Note:** You can read about the markup elements `<zg-data>` and `<zg-param>` in the [Component Basics documentation](https://www.zinggrid.com/docs/component-basics).

### `src` Attribute Grid

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

[Example code](https://app.zingsoft.com/demos/embed/EOXJGOJZ)

## Local File

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

```html
<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:

```javascript
{
  "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:

```html
<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>
```

> **Note:** For full details on using `<zg-data>` and `<zg-param>`, [check out the full list of attributes here](https://www.zinggrid.com/docs/api/tags/zg-param).

### Remote JSON Data Grid

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

[Example code](https://app.zingsoft.com/demos/embed/J7PXN7F9)

## 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:

```javascript
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:

[Example code](https://app.zingsoft.com/demos/embed/NFCFTKLO)

## 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](https://www.zinggrid.com/docs/adding-features). If you think you are ready to start styling your grid, read our [Styling Basics guide](https://www.zinggrid.com/docs/styling-basics).