0

import csvData from "./data/normal.csv"; 

useEffect(() => {
    (async () => {
      const response = await fetch(csvData);
      const data = await response.text();
      console.log({ data });
      parseCsv(data);
    })();
    parseCsv(csvData);
  }, []);
  const parseCsv = (dataCsv) => {
    Papa.parse(dataCsv, {
      header: true,
      download: true,
      worker: true,
      dynamicTyping: true,
      complete: function (results, file) {
        console.log(results, file);
      },
    });
  };

Error-----------> enter image description here

Also tried this.....

const parseCsv = (csvData) => {
Papa.parse(csvData, {
  header: true,
  download: true,
  worker: true,
  dynamicTyping: true,
  complete: function (results, file) {
    console.log(results, file);
  },
});

};

according to the docs and some exaples online i should be getting a parsed csv file in JSON ormat in the results, but i am unable to debug this error. have also tried directly passing the path in the fetch function, also tried passing the path directly in the Papa.parse(file,config). i am receiving a sting obj with all the data in the console.log. idk, i am just floundering about now.

aurogpt
  • 1
  • 2
  • You're importing your csv but then trying to use that data as the URL for a fetch? That doesn't look right. If you're importing it you don't need to fetch the data too... – Andy Jul 29 '23 at 16:23
  • Originally i just passed the imported csv file in the papa. Parse fn like papa.parse(csvData,config). It did not work so.... I tried to mix a match watever i foumd online – aurogpt Jul 30 '23 at 05:13

1 Answers1

0

The error in the code is that the csvData variable is not a valid URL. The fetch() function expects a valid URL, but csvData is a path to a file on your local machine. To fix this, you can use the file: protocol to specify the path to the file on your local machine.or you can use third party libiary papaparse to read the csv file

The image you sent me shows the error message Uncaught DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL. This error message means that the XMLHttpRequest object was unable to open the URL specified in the csvData variable. The most likely reason for this error is that the csvData variable is not a valid URL.

Dipanshu Tyagi
  • 1
  • 1
  • Hey, i tried the basic syntax also............... const parseCsv = (csvFilePath) => { Papa.parse(csvFilePath, { header: true, download: true, worker: true, dynamicTyping: true, complete: function (results, file) { console.log(results, file); }, }); – aurogpt Jul 30 '23 at 05:20
  • @aurogpt see these answers for reference [link](https://stackoverflow.com/questions/49752889/how-can-i-read-a-local-file-with-papa-parse) – Dipanshu Tyagi Jul 30 '23 at 05:52
  • [link](https://stackoverflow.com/a/76168994/22306426) found this. – aurogpt Aug 01 '23 at 09:28
  • [codesandbox](https://codesandbox.io/s/papaparse-check-y6yrff?file=/src/App.js:394-401) ... bro if you could please help me here, my brain seems to have gone missing. it is working here on code-sandbox, but not on my system same code, still unable to understand the error, I mean I know the invalid URL part, but why, it should work ....shouldn't it – aurogpt Aug 01 '23 at 09:36