Return to Answer

added 1666 characters in body

Source Link

edited Nov 1, 2016 at 15:44

23.5k
4
33
49

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

An additional note: if there is a header row in your data, like in the example above, I'd strongly suggest to not map to arrays, but to objects. This makes your code easier to read and use:

// Create an array of objects
// Use the first line as keys
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)
    .map(function(lineStr) {
        return lineStr.split(",");
    });
  
  var keys = lines[0];

  var objects = lines
    .slice(1)
    .map(function(arr) {
      return arr.reduce(function(obj, val, i) {
        obj[keys[i]] = val; 
        return obj;
      }, {});
    });
  
  return JSON.stringify(objects, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

An additional note: if there is a header row in your data, like in the example above, I'd strongly suggest to not map to arrays, but to objects. This makes your code easier to read and use:

// Create an array of objects
// Use the first line as keys
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)
    .map(function(lineStr) {
        return lineStr.split(",");
    });
  
  var keys = lines[0];

  var objects = lines
    .slice(1)
    .map(function(arr) {
      return arr.reduce(function(obj, val, i) {
        obj[keys[i]] = val; 
        return obj;
      }, {});
    });
  
  return JSON.stringify(objects, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

Source Link

answered Nov 1, 2016 at 15:36

user3297291

23.5k
4
33
49

To process a csv type file, there's two things you need to do:

Split in to lines
Split in to columns

You can do both by using String.prototype.split. This method splits a string into an array. To split on each new line, use the regex /\n/. To split each column, use the character that is used in your data (probably , or ;).

Here's an example:

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

Store this data snippet as a .csv file to test:

ONE,TWO,THREE
1,2,3
2,4,6
3,6,9

Collectives™ on Stack Overflow

Return to Answer