Documentation menu

Connecting to CSV using the client-side parser

This guide describes how to connect Flexmonster UI to your remote CSV data.

Prerequisites

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

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

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

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

Load CSV data without field names

By default, Flexmonster considers that the first data record in CSV 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 CSV data:

const dataSource = {  
  type: "csv",       
  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.

Specify the delimiter used in the file

In addition to comma (","), Flexmonster supports the following delimiters: ";", "|", and "\t".

If one of these delimiters is used in your CSV data, specify the delimiter through parser configs in your code or in the embedded metadata inside the CSV file:

If the delimiter is specified in both the parser configs and the metadata, Flexmonster will use the delimiter from the parser configs.

If the delimiter is not explicitly specified, Flexmonster will autodetect it. Note that the autodetection may be incorrect if your data contains multiple characters that can be treated as delimiters.

Specify the record delimiter used in the file

In addition to the "\n" character, Flexmonster supports the "\r\n" record delimiter. You can specify which record delimiter is used in your CSV data by setting the dataSource.parser.recordDelimiter property in parser configs:

const dataSource = {  
  type: "csv",  
  url: "<url to the file>",  
  parser: {  
    recordDelimiter: "\r\n"
  }  
};

If the record delimiter is not explicitly specified, Flexmonster will autodetect it.

Specify the decimal separator used in the file

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

If a comma is used as a decimal separator in your file, specify this through parser configs in your code or in the embedded metadata inside the CSV file:

If the decimal separator is specified in both the parser configs and the metadata, Flexmonster will use the separator from the parser configs.

See also