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 data:

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

Flexmonster 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 set parser.dataHasHeader to false if your data contains the embedded metadata.

See also