Utilizing a 2D array that has been downloaded previously and reusing it as a 2D array once more

Question

Utilizing a 2D array that has been downloaded previously and reusing it as a 2D array once more

I am working with a 2D array in JavaScript within a Google Chrome extension. Each index contains text with various characters. I have successfully converted this 2D array into a CSV file and provided code for downloading it:

function Download(){
  //https://stackoverflow.com/a/14966131/11974735
  var array = JSON.parse(sessionStorage.getItem("array"));
  let csvContent = "data:text/csv;charset=utf-8," 
    + array.map(e => e.join(",")).join("\n");
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my.csv");
  document.body.appendChild(link); // Required for FF
  link.click();
}
// This will download the data file named "my_data.csv".

Now, my challenge is how to upload and utilize this as a 2D array again (on another machine or in case of hard drive crash)? Upon researching online, I found solutions where the file cannot contain specific characters due to delimiter issues, among other complications.

If anyone could assist me, I would greatly appreciate it.

This simple solution may encounter difficulties if the cells contain quotes, commas, or other escaped characters. To handle more complex CSV strings, a Regex solution would need to be implemented (refer to the accepted answer on "How can I parse a CSV string with Javascript?"). Alternatively, using a library would be more efficient to support multiple common formats.

javascript arrays csv google-chrome-extension upload

Answer 1

Answer №1

Using JSON.stringify allows us to generate CSV line strings, and using JSON.parse enables us to restore the data back to its original state.

For example:

var a = ["abc", '"', "'", ","];
var csv = JSON.stringify(a);     // format any symbols properly
console.log(csv);                // ["abc","\"","'",","]
csv = csv.slice(1, -1);          // remove the square brackets
console.log(csv);                // "abc","\"","'",","
csv = csv.replace(/\\"/g, '""'); // replace \" with ""
console.log(csv);                // "abc","""","'",","

The code below demonstrates how to download data as a CSV file from sessionStorage, upload the file, and then store it back into the sessionStorage.

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<script>

storeData(); // initially store data, for download

function storeData() {
  var array = JSON.stringify([
    ["lorem", "symbols\"',\n!@#$%^&*()_+-={}|[]:;<>/?", 'ip"sum'],  // any symbols
    ["hello", "emoji⌚⌛⏩", "world"],  // any emojis
  ]);
  sessionStorage.setItem("array", array);
}

function Download() {
  var array = JSON.parse(sessionStorage.getItem("array"));
  var csvContent = array.map(e => JSON.stringify(e).slice(1, -1).replace(/\\"/g, '""')).join("\n");
  var encodedUri = "data:text/csv;charset=utf-8," + encodeURIComponent(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my.csv");
  document.body.appendChild(link); 
  link.click();
}

function Upload() {
  var file = document.getElementById("fileForUpload").files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
      var array = convertCsvToArray(evt.target.result);       
      sessionStorage.setItem("array", JSON.stringify(array));
    }
    reader.onerror = function (evt) {
      console.log("error reading file");
    }
  }
}

function convertCsvToArray(csvStr) {
  return csvStr.split(/\n/).map(line => { 
    var items = Array.from(
      line.matchAll(/("(([^"]|"")*?)"|([^",][^,]*?))?(,|$)/g)
    ).map(match => match[2] || match[4] || ''); 

    var jsonStr = '[' + items.slice(0, -1).map(item => '"' + item.replace(/""?/g, '\\"') + '"').join(",") + ']';

    return JSON.parse(jsonStr);
  });
}

</script>
  <button onclick="Download()">Download</button>
  <input type="file" id="fileForUpload">
  <button onclick="Upload()">Upload</button>
</body>
</html>

Answer 2

Using JSON.stringify allows us to generate CSV line strings, and using JSON.parse enables us to restore the data back to its original state.

For example:

var a = ["abc", '"', "'", ","];
var csv = JSON.stringify(a);     // format any symbols properly
console.log(csv);                // ["abc","\"","'",","]
csv = csv.slice(1, -1);          // remove the square brackets
console.log(csv);                // "abc","\"","'",","
csv = csv.replace(/\\"/g, '""'); // replace \" with ""
console.log(csv);                // "abc","""","'",","

The code below demonstrates how to download data as a CSV file from sessionStorage, upload the file, and then store it back into the sessionStorage.

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<script>

storeData(); // initially store data, for download

function storeData() {
  var array = JSON.stringify([
    ["lorem", "symbols\"',\n!@#$%^&*()_+-={}|[]:;<>/?", 'ip"sum'],  // any symbols
    ["hello", "emoji⌚⌛⏩", "world"],  // any emojis
  ]);
  sessionStorage.setItem("array", array);
}

function Download() {
  var array = JSON.parse(sessionStorage.getItem("array"));
  var csvContent = array.map(e => JSON.stringify(e).slice(1, -1).replace(/\\"/g, '""')).join("\n");
  var encodedUri = "data:text/csv;charset=utf-8," + encodeURIComponent(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my.csv");
  document.body.appendChild(link); 
  link.click();
}

function Upload() {
  var file = document.getElementById("fileForUpload").files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
      var array = convertCsvToArray(evt.target.result);       
      sessionStorage.setItem("array", JSON.stringify(array));
    }
    reader.onerror = function (evt) {
      console.log("error reading file");
    }
  }
}

function convertCsvToArray(csvStr) {
  return csvStr.split(/\n/).map(line => { 
    var items = Array.from(
      line.matchAll(/("(([^"]|"")*?)"|([^",][^,]*?))?(,|$)/g)
    ).map(match => match[2] || match[4] || ''); 

    var jsonStr = '[' + items.slice(0, -1).map(item => '"' + item.replace(/""?/g, '\\"') + '"').join(",") + ']';

    return JSON.parse(jsonStr);
  });
}

</script>
  <button onclick="Download()">Download</button>
  <input type="file" id="fileForUpload">
  <button onclick="Upload()">Upload</button>
</body>
</html>

Utilizing a 2D array that has been downloaded previously and reusing it as a 2D array once more

Answer №1

Similar questions

I'm looking for ways to incorporate TypeScript definition files (.d.ts) into my AngularJS application without using the reference path. Can anyone provide

Display a form with hidden input that dynamically updates on any input change

Having trouble with React button conditional rendering not functioning properly

Learn how to incorporate a click event with the <nuxt-img> component in Vue

Encountering difficulties while trying to install ng2-material in Angular 2

Issue: App is not being styled with Material UI Theme Colors

The error "map is not a function" occurs when trying to update the

Arrays causing Typescript compilation errors

Having trouble accessing the ng-model within ng-repeat in the controller of an AngularJS component

Repeat the most recent AJAX request executed

What is the best method for extracting an array item from a delimited string?

I am interested in using the split method to separate and then mapping an object in JavaScript

Stop procrastinating and take action before the JavaScript function concludes

Using PHP to filter data using $_GET variables?

Using various conditions and operators to display or conceal HTML elements in React applications, particularly in NextJS

Can the arrangement of icons/buttons on the JW Player control bar be customized?

ShaderMaterial does not support textures when replicating MeshLambertMaterial

Running NPM module via Cordova

Update the value of input within a Struts2 iterator by utilizing JavaScript

The URL remains unchanged even after clicking the search button using the post method