-1

I am new to this stuff.

I'm trying to build a website about finance. I have written a scrypt in python to get shares data from an API, created my own market index and exported the datas of my index in a CSV file. It's important because, I need to create an historic and observe its evolution (the script will run automatically in a VM to add data as it goes). No problem at this stage.

Now, my purpose is to read and treat my CSV file in a JS script to stock the datas into an array (graphJS use array to display a graph and that's what I want to use).

I only found solutions that use an <input> HTML (user import a CSV on a website, I do not need that) or JSQuery (I have never been able to use it)

I'm looking for a native JavaScript solution. For the beginning, I am just looking to display datas from my CSV in console.log(). And with a "for" loop, use ".push" to iterate the datas into an array. But I will do this after I successfully displayed my file in the console.

My code does not work, can someone help me ?

const csvLocalFile = "file.csv";
    
const csv = csvLocalFile.files[0];
const reader = new FileReader();
    
reader.readAsText(csv);
    
TypeError: Cannot read properties of undefined (reading '0')
Tim
  • 39
  • 6
  • Can you elaborate as to what about the error message is specifically unclear to you? You’re referencing a variable `csvFile` which does not exist in the scope of the snippet you’ve provided, and it’s not clear how you reached a conclusion that it *should* exist. – esqew Apr 03 '22 at 15:47
  • Thank you for your response. Of course, csvFile is csvLocalFile. After this change, an other error appear : Uncaught TypeError TypeError: Cannot read properties of undefined (reading '0') – Tim Apr 03 '22 at 17:06
  • Quick Question: Where do you want to read your csv file from? – mrtechtroid Apr 03 '22 at 17:37
  • @mrtechtroid I want to iterate my CSV file from my local folder, in a JS script, to display in my website with something like : "myConst.textContent = myDataFromMyCSV" – Tim Apr 03 '22 at 17:43
  • I Have Edited The Answer... The Variable `obj` contains your csv info – mrtechtroid Apr 03 '22 at 17:55

1 Answers1

0

The Issue Is That You Are Trying To Access The File Contents From A Variable Of Type String. What Your Code Does Is Try To Reference An Element Inside This String Like A Map Which doesn't Exist. Giving The Error. Also In The Code It Only Creates A New Variable whose contents are file.csv and doesn't actually store the file. To Actually Get The Contents Of Your CSV:

var filecontent
// https://stackoverflow.com/a/29176118
var openFile = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
      var text = reader.result;
      filecontent = text.replace("","")
    };
    reader.readAsText(input.files[0]);
  };

And In Your HTML

<input type="file"onchange="openFile(event)">

Your CSV Contents Will Be Stored Inside the Variable filecontent

EDIT: Non File Upload Types

let obj = await (await fetch('file.csv')).text();

This Contains Your CSV.

mrtechtroid
  • 658
  • 3
  • 14
  • A request: **please don't write every word with a capital letter**, it is very distracting and not how English is supposed to be written. – Peter B Apr 03 '22 at 17:57
  • Thank you very much for your answer but, I don't understand your update. It means that I do not have to use an input HTML ? So, I use fetch (http:/ /localhost/ file.csv) and skip the "event.target" ? – Tim Apr 03 '22 at 19:44
  • Yes. You Can Use This To Get Files Without Uploading them if you know their path in the internet which in your case would be localhost. – mrtechtroid Apr 04 '22 at 01:51
  • Thank you very much, not solved but I have a way to try ! – Tim Apr 07 '22 at 13:28