Convert JSON Data into Grid Component

As a data source you can use a database, a JSON file or any other type of data storage medium from where you can load data and populate the Grid component. When you have the data ready, you may need to convert it to a format recognizable by the IntegralUI Grid component.

In following sections, you will learn about data structure used by the Grid component. In addition, a small data table saved in JSON file is used as a data source to populate the grid. You will find sample code below that shows how to convert JSON data for the grid in JavaScript, Angular, React and Vue.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Data Table in JSON

As an example, we are using a data table with some records saved in JSON format:

• JSON

It is an array of objects, where each object has a number of fields with values. You cannot load this array directly into the Grid component, because of the way data is used internally by the grid. Therefore, first you need to learn about the grid data structure.

Related: Data Binding in Grid Component

Grid Data Structure

In general, there are three main objects used by the IntegralUI Grid component:

• column
• row
• cell

The Grid displays its data in a set of columns and rows, where each row contains a set of cells with values for each column. The link between these objects is created using unique identifiers for each column and row objects. For a specific cell to appear under specific column, it must have the same identifier like the specified column. This creates strong relations between columns and row cells. When columns are reordered or hidden, a correct cell value is always displayed in a row under correct column.

Using columns property, you can store an array of column objects, where each column has details like:

• id - unique identifier
• headerText - column title
• width - column size

There are many column properties that you can use, but for this example we will use only a few of them. A complete list of all column fields in use is available in Grid API under Data section look for column object.

Although you can create columns from a Data Table for rows (like in this example), to take full advantage of grid column objects, is best to use a separate data table for columns that will containformation on data format (date, currency etc), filter type that you want to use, alignment, child columns for multi-level headers etc.

In similar way, using rows property, you can store an array of row objects, where each row has details like:

• id - unique identifier
• cells - a collection of cell objects
  • colName - the column name, this creates a link between a column and a cell
  • value - the cell value

There are other row properties that you can use, but for this example we will use only the ones above. A complete list of all row and cell fields in use is available in Grid API under Data section look for row and cell object.

So to populate the grid with some data, you need:

• a set of column objects used to display columns with header and footer
• a set of rows with cells to display grid rows where each cell object is used to show data under columns

How to Convert JSON Data and Populate the Grid Component

We already have a JSON data ready, where each object has a set of fields. These fields are names of our columns. Using this data, we can create a set of columns objects and apply it to the Grid component:

• JavaScript
• Angular
• React
• Vue

From JSON data, you can create a set of rows, where each row contains a set of cells for each column in the grid. Each JSON object has a pair of field name (that is a column name) and a value, that is a cell value displayed under the column. Using columns created previously, we can cycle through them and create cell objects where each cell stores the column name and the value from JSON data.

• JavaScript
• Angular
• React
• Vue

Instead of using colName field to create a link between columns and cells, you can use column id and cell cid field (stands for column id). In similar way cell has a rid field, which contains the identifier for the parent row that holds the cell. This rid value for each cell is created internally by the Grid component.

Finally, you only need to apply these set of column and row objects to columns and rows properties of the Grid component.

Conclusion

You can use a database, JSON files or any other data source to populate the Grid component. However, at first you may need to convert the data from the data source to format recognizable by the IntegralUI Grid component. Once the data is ready and the grid data structure is created, displaying the data in the Grid is straightforward.

A sample code showing how to convert JSON data into the Grid component is available in vanilla JavaScript, Angular, React and Vue. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.