Documentation menu

Connecting to JSON using the client-side parser

This guide describes how to connect Flexmonster UI to your JSON data. You can connect Flexmonster to remote or inline JSON data.

Prerequisites

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

To connect to your JSON data by URL, specify the URL in the dataset.dataSource.url property in the state object:

const state = {
  id: "fm-state",  
  dataset: {  
    dataSource: {  
      type: "json",  
      url: "https://cdn.flexmonster.com/data/retail-data.json"  
    }  
  }  
};

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

Connect to inline JSON data

To connect to your inline JSON data, specify it in the dataset.dataSource.data property in the state object:

const state = {  
  id: "fm-state",  
  dataset: {  
    dataSource: {  
      type: "json",   
      data: [  
        {  
          "Country" : "Canada",  
          "State" : "Ontario",  
          "City" : "Toronto",  
          "Price" : 174  
        }  
      ]  
    }  
  }  
};

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

Load JSON data without field names

When Flexmonster parses a JSON array of arrays, it by default considers that the first array in the 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, set the dataSource.parser.dataHasHeader property to false when connecting to JSON:

dataSource: {  
  type: "json",       
  url: "<url to the file>",  
  parser: {  
    dataHasHeader: false
  }  
}

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

Note Do not set parser.dataHasHeader to false if your data contains the embedded metadata.

Specify the decimal separator used in the data

By default, Flexmonster considers that "." is a decimal separator in JSON data.

If a comma is used as a decimal separator in your data, set the dataSource.parser.decimalSeparator property to "," when connecting to JSON:

const dataSource = {  
  type: "json",  
  data: [  
    ["Category", "Color", "Country", "Price"],
    ["Accessories", "Red", "Australia", "174,50"]
  ],   
  parser: {  
    decimalSeparator: ","
  }  
};

Troubleshooting

If you run into any issues while connecting to your JSON data, refer to the Troubleshooting guide.

See also