Get Started with Data Basics in ZingGrid
Tags: javascript, html, tutorial, webdev
Published: 2019-02-21 17:19:34

---
title: Get Started with Data Basics in ZingGrid
published: true
description: Learn how to assign data to your data grid on page-load 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-2.png?alt=media&token=8f8216ee-6f44-49e6-ba09-869ed2400386
---

[In my last post](https://dev.to/zinggrid/creating-your-first-data-grid-with-zinggrid-2288), I walked you through building your first data grid with [ZingGrid](http://zinggrid.com), a JavaScript library for data grids and data tables. Now, I'm going to summarize the essentials when it comes to adding data to your grid after page-load. Check out the video tutorial to see how it’s done, or follow along with me in this written tutorial.
{% youtube XSuNwIrpiHg %}
The two topics you'll learn about in this post are:
1. Data types that ZingGrid accepts
2. Data assignment in ZingGrid

---

## Data types that ZingGrid accepts
ZingGrid accepts five types of data structures:
1. Array of Objects `[{}]`
2. Array of Nested Objects `[{key: {}}]`
3. Object of Objects `{key: {}}`
4. Object of Nested Objects `{key: {key: {}}}`
5. Array of Arrays `[[]]`

Note that when you nest objects in your data, ZingGrid will automatically create nested column headers for you by default. Here's an example of what I mean:
![Example of default nested column headers](https://firebasestorage.googleapis.com/v0/b/zinggrid-marketing.appspot.com/o/emails%2Fgetting-started-1%2Fnested-object-example.png?alt=media&token=f9cc7b8e-2f67-4d42-b493-40d245d31268)

#### Array of Objects
[View a live example using this data structure.](https://app.zingsoft.com/demos/create/XEET90Q0)
```
[
  {
    "name": "Philip J. Fry",
    "origin": "Earth"
  }
]
```

#### Array of Nested Objects
[View a live example using this data structure.](https://app.zingsoft.com/demos/create/WA1E4DR2)
```
[
  {
    "employee": {
      "name": "Philip J. Fry",
      "origin": "Earth"
    }
  }
]
```

#### Object of Objects
[View a live example using this data structure.](https://app.zingsoft.com/demos/create/IXQ33BN1)
```
{
  "1": {
    "name": "Philip J. Fry",
    "origin": "Earth"
  },
  "2": {
    "name": "Turanga Leela",
    "origin": "Earth"
  }
}
```

#### Object of Nested Objects
[View a live example using this data structure.](https://app.zingsoft.com/demos/create/BDKM7REB)
```
{
  "1": {
    "employee": {
      "name": "Philip J. Fry",
      "origin": "Earth"
      }
  },
  "2": {
    "employee": {
      "name": "Turanga Leela",
      "origin": "Earth"
      }
  }
}
```

#### Array of Arrays
[View a live example using this data structure.](https://app.zingsoft.com/demos/create/U8MWMWX6)
```
[
  ["Philip J. Fry","Earth"],
  ["Turanga Leela","Earth"] ...
]
```

---

## Data Assignment in ZingGrid
ZingGrid provides the `data` attribute as the most primitive method of assigning data to the grid. This data must have a valid JSON structure. This is per HTML spec when passing objects and arrays to HTML attributes. There are three supported ways to set ZingGrid's data attribute:
1. HTML inline data
2. ZingGrid API
3. HTML attribute manipulation

#### HTML Inline Data (Stringified)
Assigning inline data in markup is the most basic way of assigning data in ZingGrid. This is the method we've used in all of our examples so far in this series.
```
<zing-grid data='[{"name": "Philip J. Fry"}]'></zing-grid>
```

#### ZingGrid API
To assign JavaScript Object data, use the ZingGrid API method `setData()`. This is the *most efficient* way to assign data in ZingGrid. This is because this assignment involves property assignment as opposed to attribute manipulation. This means data is being directly assigned to the internal ZingGrid component data property. [Check out the API docs](https://www.zinggrid.com/docs/api-methods#zg-data) to see all of the data methods, or view the live example below.
```
const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target grid and assign data directly
zgRef.setData(data);
```
{% codepen https://codepen.io/zinggrid/pen/gqyqYg %}

#### Attribute Manipulation
Assigning data through JavaScript as an object is the most practical use of assigning data, and it can be achieved via direct attribute manipulation. This will assign a string to the HTML attribute so the data string will appear in the markup, but this isn't a good idea for large datasets. View the live example belown.
```
const zgRef = document.querySelector('zing-grid');
const data = [{...}];
// target attribute directly and stringify your data structure
zgRef.setAttribute('data', JSON.stringify(data));
```
{% codepen https://codepen.io/zinggrid/pen/mvgaNr %}

---

Ok, those are the basics about data in ZingGrid. Please let me know if you have any questions, and keep an eye out for the next tutorial in this series if you'd like to learn about connecting remote JSON files and endpoints to ZingGrid. 🔌👀