Connecting to JSON data

This guide illustrates how to connect Flexmonster to a JSON data source.

You can connect to your JSON data using the client-side or the server-side approach. To connect to a JSON file smaller than 100 MB, use the client-side approach, which is described in this guide.
To connect to a JSON file larger than 100 MB, we recommend using Flexmonster Data Server — our server-side solution for processing large datasets. For more details, refer to the Connecting to JSON using Flexmonster Data Server guide.

Prerequisites

Your JSON data should be specified in one of the following formats:

An array of objects, where each object is an unordered set of key-value pairs.

Example of an array of objects

[
  {
    "Color" : "green",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price" : 174,
    "Quantity" : 22
  },
  {
    "Color" : "red",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price" : 166,
    "Quantity" : 19
  } 
]

Live example

An array of arrays, where the first array contains field names, while other arrays are an ordered collection of values.

Example of an array of arrays

[
  ["Color", "Country", "State", "City", "Price", "Quantity"],
  ["green", "Canada", "Ontario", "Toronto", 174, 22],
  ["red”, "USA", "California", "Los Angeles", 166, 19]
]

Live example

Other JSON formats aren’t officially supported and may have unexpected results.

Note Ensure that dates are also specified in a supported format.

Step 1. Embed Flexmonster into your webpage

If Flexmonster is not yet embedded, set up an empty component in your webpage:

In pure JavaScript

Complete the Integrating Flexmonster guide. Your code should look similar to the following example:

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  toolbar: true
});

In React

Complete the Integration with React guide. Your code should look similar to the following example:

<FlexmonsterReact.Pivot
 toolbar={true}
/>

In Angular

Complete the Integration with Angular guide. Your code should look similar to the following example:

<fm-pivot
 [toolbar]="true">
</fm-pivot>

In Vue

Complete the Integration with Vue guide. Your code should look similar to the following example:

<Pivot
 toolbar
/>

Step 2. Connect to your JSON data

You can connect Flexmonster to remote, local, or inline JSON data.

Connect to remote JSON data (from a file or a server-side script)

Remote JSON data can be a remote JSON file or data generated by a server-side script. Flexmonster can be connected to remote JSON data in one of the following ways:

Via UI
In the report
Using API calls

Via UI

To connect to remote JSON data via UI, use the Toolbar:

Step 1. On the Toolbar, select Connect > To remote JSON. As a result, the Open remote JSON pop-up window will appear.

Step 2. Enter the URL to your JSON data in the input field and click Open.

In the report

To connect to remote JSON data in the report, use the dataSource.filename property:

report: {
  dataSource: {
    filename: "<url-to-remote-json-data>"
  }
}

Live example

Connecting to data stored in a nested JSON property

If your data for Flexmonster is stored in a nested JSON property, define the path to that property in the dataSource.dataRootPath.

For example, look at the structure of the following JSON file:

{
  "creationDate": "01-01-2022", 
  "userData": {
    "flexmonsterData": [
      // Your data
    ]
  }
}

As you can see, the needed data is stored in the userData.flexmonsterData property. To connect Flexmonster to this data, set the dataRootPath property to "userData.flexmonsterData":

report: {
  dataSource: {
    filename: "<url-to-remote-json-data>",
    dataRootPath: "userData.flexmonsterData"
  },
  // Other configs
}

Live example

Using API calls

To connect to remote JSON data at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab.

To load the data and clear the report, use the connectTo() API call:
```
pivot.connectTo({
  filename: "<url-to-remote-json-data>"
});
```
Live example

To load the data without clearing the report, use the updateData() API call:
```
pivot.updateData({
  filename: "<url-to-remote-json-data>"
});
```
Live example

Connect to a JSON file from your computer

The pivot table can be connected to a JSON file from your computer in one of the following ways:

Via UI
In the report
Using API calls

Via UI

To connect to a local JSON file via UI, use the Toolbar:

Step 1. On the Toolbar, select Connect > To local JSON. As a result, the file manager will appear.
Step 2. Select the file via the file manager.

In the report

To connect to a local JSON file in the report, use the dataSource.browseForFile property:

report: {
  dataSource: {
    type: "json",
    browseForFile: true
  }
}

Note The type property must be defined explicitly.

Live example

Using API calls

To connect to a local JSON file at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab.

To load the file and clear the report, use the connectTo() API call:
```
pivot.connectTo({
  type: "json",
  browseForFile: true
});
```
Note The type property must be defined explicitly.
Live example

To load the file without clearing the report, use the updateData() API call:
```
pivot.updateData({
  type: "json",
  browseForFile: true
});
```
Note The type property must be defined explicitly.
Live example

Connect to inline JSON data

The pivot table can be connected to inline JSON data in one of the following ways:

In the report
Using API calls

In the report

To connect to inline JSON data in the report, use the dataSource.data property:

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      data: getData()
    }
  }
});

function getData() {
  return [{
    "Category": "Accessories",
    "Color": "green",
    "Quantity": 22
  }];
}

Live example

Using API calls

To connect to inline JSON data at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab.

To load the data and clear the report, use the connectTo() API call:

pivot.connectTo({
  data: getData()
});

function getData() {
  return [{
    "Country": "Canada",
    "Product": "Bike",
    "Price": 68450
  }];
}

Live example

To load the data without clearing the report, use the updateData() API call:

pivot.updateData({
  data: getData()
});

function getData() {
  return [{
    "Country": "Canada",
    "Product": "Bike",
    "Price": 68450
  }];
}

Live example

Display non-Latin characters correctly

If your data contains non-Latin characters, ensure you have set UTF-8 encoding for your data and page so the data is displayed correctly in the component.

Troubleshooting

If you run into any issues, visit our troubleshooting page.

What's next?

You may be interested in the following articles: