'Automatically load a CSV for parsing using Javascript

I've cobbled together some code that allows me to parse a CSV file and then pull variables from it based on a variable from a query string. The issue I have is the only way I've been able to get the CSV file into the page is to manually load it with a form. I know there are great tools like Papa.Parse that would probably make this easy, but an added wrinkle is that I'm building this to be hosted on Pardot (one of Salesforce's marketing platforms, for those who haven't heard of it), so I can't just load 3rd party javascripts to their servers.

Below is my working "proof of concept" code (special thanks to https://sebhastian.com/ and anyone else I stole from) that lets me pull any data I want from a CSV, based on the ID column. It, of course, requires a CSV with ID, FirstName, and Phone columns, and a query string with id=[one of the ID numbers in the CSV] to function.

Does anyone have any suggestions for modifying it to load the CSV automatically that won't throw CORS or some other kind of error? Note that I'm unable to have the CSV in the same physical location as the HTML because no matter how I load it, Pardot puts files in different folders than pages and it also uses an alias for our pages (see the base href in the head).

<!DOCTYPE html>
<html>
<head>
<base href="https://www2.cbiz.com" >
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="%%description%%"/>
<title>%%title%%</title>
<script type="text/javascript">
    const urlParams = new URLSearchParams(window.location.search);
    const userID = urlParams.get("id")

</script>
</head>
<body>
<p id="name"></p>
<p id="phone"></p>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  </form>
    
<script>
    const myForm = document.getElementById("myForm");
    const csvFile = document.getElementById("csvFile");

    function csvToArray(str, delimiter = ",") {

      const headers = str.slice(0, str.indexOf("\n")).split(delimiter);

      const rows = str.slice(str.indexOf("\n") + 1).split("\n");

      const arr = rows.map(function (row) {
        const values = row.split(delimiter);
        const el = headers.reduce(function (object, header, index) {
          object[header] = values[index];
          return object;
        }, {});
        return el;
      });

      // return the array
      return arr;
    }

    myForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const input = csvFile.files[0];
      const reader = new FileReader();

      reader.onload = function (e) {
        const text = e.target.result;
        const data = csvToArray(text);
        for(var i = 0; i < data.length; i++) {
            if(data[i].ID == userID)    {
                document.getElementById("name").innerHTML = "The first name is: " + data[i].FirstName;              
                document.getElementById("phone").innerHTML = "The phone number is: " + data[i].Phone;
            }
        }
      };
      
      reader.readAsText(input);
    });
</script>
</body>
</html>

Thanks for the assist.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Automatically load a CSV for parsing using Javascript

Sources

Related Questions