Documentation menu

Connecting to JSON using the Flexmonster server

This guide describes how to connect Flexmonster UI to your JSON data.

Prerequisites

  • The Flexmonster server installed and running.

  • An application with Flexmonster embedded into it.

See the installation guide to install the Flexmonster server and embed Flexmonster UI into your application.

Step 1. Creating a data source on the Flexmonster server

Step 1.1. Open Flexmonster Admin Panel and go to Data sources > Add data source.

Step 1.2. Configure connection parameters for your JSON data:

  • Specify the data source name.
  • Specify the source of your JSON data: local file (File system) or the URL to the data (URL).

Creating a JSON data source

Step 1.3. Select Create data source.

The data source with your JSON data is now available for use on the client side.

The Has header toggle button

This configuration works only for JSON data formatted as an array of arrays.

By default, the Flexmonster server considers that the first array in JSON data contains field names. This may lead to incorrect parsing of data without field names. For example:

[
  ["Accessories", "red", "Australia", 174],
  ["Components", "blue", "France", 768],
  ["Clothing", "green", "Canada", 512] 
]

Here, Accessories, red, Australia, and 174 will be treated as field names, while other data records will be parsed as field values.

To parse such data correctly, disable the Has header config when creating a data source.

The server will now treat all data records in the file as field values. In this case, field unique names in the component will be field 0, field 1, etc.

Note Do not disable the Has header config if your data contains the embedded metadata.

Step 2. Configuring the connection on the Flexmonster UI

On the client side, connect to your data source in the state object using the dataset.dataSource.url and dataset.dataSource.name properties:

const state = {
  id: "fm-state",
  dataset: {
    dataSource: {
      url: "ws://localhost:9501/",
      name: "sales"
    }
  } 
};

const flexmonster = fm3.Controls.Flexmonster("#pivot-container", { 
  state: state
});

Notice that the name matches the name of the data source created in step 1.

See also