0

I need to parse a CSV file to json (or array, still trying to search for the best method!),

  • show the data to the user in a container,
  • create a new column on that same csv for LABELLING, and letting the user populate it according to clicking some buttons on the app,
  • and save the new schema to local computer.

How should I approach this problem?

I've been reading into data-grid, handsontable and papaParser, but I'm still very confused. I'm still kind of a beginner at javascript. It would be a big help if you could give me the big picture on the best way in how proceed with this, I'm sure I could troubleshoot the technical details on my own. Thanks in advance!

ada5tra
  • 1
  • Can you clarify "show the data to the user in a container"? Does that mean a chart/table in the window? – Allxie Mar 08 '22 at 17:14
  • @Allxie (Not sure yet), but Yes, my idea would be to show part of a table in the window (for example, only a single column) – ada5tra Mar 08 '22 at 17:27
  • Can you link to "data-grid"? The exact match for that on npm is pretty low-use. Do you mean Material-UI's data-grid? https://www.npmjs.com/package/@material-ui/data-grid – Allxie Mar 08 '22 at 21:05

1 Answers1

0

Handsontable does not allow you to use CSV as the datasource so you would need to parse it to JSON first using another library. Using JSON itself requires some additional setup - especially when you have a nested structure of data. Then you might need to use the columns option the specify objects for a given column.

Within the abilities of that grid, you can alter columns and those would be reflected in a new CSV file generated by the exportToFile plugin.

The exportToFile plugin allows you to set some values as the delimiter or ability to show/hide headers to keep the consistency with your input CSV structure.

Example

const exportPlugin = hot.getPlugin('exportFile');

button.addEventListener('click', () => {
  exportPlugin.downloadFile('csv', {
    bom: false,
    columnDelimiter: ',',
    columnHeaders: false,
    exportHiddenColumns: true,
    exportHiddenRows: true,
    fileExtension: 'csv',
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
    mimeType: 'text/csv',
    rowDelimiter: '\r\n',
    rowHeaders: true
  });
});
ABudnik
  • 111
  • 6