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
  } 
]

Check out an example on JSFiddle.

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]
]

See an example on JSFiddle.

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>"
  }
}

See a live demo on JSFiddle.

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
}

See an example on JSFiddle.

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:
```
flexmonster.connectTo({
  filename: "<url-to-remote-json-data>"
});
```
Try this example on JSFiddle.

To load the data without clearing the report, use the updateData() API call:
```
flexmonster.updateData({
  filename: "<url-to-remote-json-data>"
});
```
Check out an example on JSFiddle.

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.

See a live demo on JSFiddle.

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:
```
flexmonster.connectTo({
  type: "json",
  browseForFile: true
});
```
Note The type property must be defined explicitly.

Try this example on JSFiddle.

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

See an example on JSFiddle.

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
  }];
}

See a live demo on JSFiddle.

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:

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

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

Try this example on JSFiddle.

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

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

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

Check out an example on JSFiddle.

Display non-English characters correctly

If you use an alphabet with special characters you must use UTF-8 encoding. There are two ways to do this:

Specify the encoding for your HTML page to UTF-8 using the content-type HTTP header or the corresponding meta tag:
```
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
```
Content from a database and static JSON files also must be encoded as UTF-8.
If you are not able to change the content of your HTML file, you can embed Flexmonster Pivot in a separate JS file with specified UTF-8 encoding.
```
<script src="yourfile.js" charset="UTF-8"></script>
```

Troubleshooting

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

What's next?

You may be interested in the following articles: