Is is possible to read a .csv file with Javascript fetch API?

Question

Like

fetch('state_wise_data.csv')
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(err => console.log(err))

Tried doing this but didn't work.

When it said `enter code here` you were supposed to enter code there. — jonrsharpe, Nov 24 '20 at 08:14
"didn't work". What happened, what didn't happen? Did you expect `response.json()` to do something sensible with data that's not JSON? — AKX, Nov 24 '20 at 08:15
@jonrsharpe Will do that for future queries. Kinda getting used to stackoverflow. Thank you — Karthik Prasad, Nov 24 '20 at 08:17
You can't load CSV with `response.json())`, you need to use something like `response.text())` — KiraLT, Nov 24 '20 at 08:18
@KiraLT Thanks for your response. In that case, after getting the response, am I supposed to convert that data into array and use it? — Karthik Prasad, Nov 24 '20 at 08:20

score 12 · Answer 1 · answered Nov 24 '20 at 08:28

First of all, CSV it's not a JSON. Fetch does not have CSV support, you will need to download CSV string (you can use response.text()) and use the third party CSV parser.

For parse CSV parser you can use papaparse:

"Isn't parsing CSV just String.split(',')?"

Heavens, no. Papa does it right. Just pass in the CSV string with an optional configuration.

Example:

const response = fetch('state_wise_data.csv')
   .then(response => response.text())
   .then(v => Papa.parse(v))
   .catch(err => console.log(err))

response.then(v => console.log(v))

It also supports file downloading:

Papa.parse('state_wise_data.csv', {
    download: true,
    complete: results => {
        console.log(results);
    }
})

Saracha Tongkumpunt · Answer 2 · 2021-02-11T05:42:04.443

Fetch is 100% work with .csv file (or even api with req.query). 'content-type': 'text/csv' must be addressed in the fetch's headers:{}, and use res.text() instead of res.json() to interpret data.

const downloadCsv = async () => {
    try {
        const target = `https://SOME_DOMAIN.com/data/csv/addresses.csv`; //file
        //const target = `https://SOME_DOMAIN.com/api/data/log_csv?$"queryString"`; //target can also be api with req.query
        
        const res = await fetch(target, {
            method: 'get',
            headers: {
                'content-type': 'text/csv;charset=UTF-8',
                //'Authorization': //in case you need authorisation
            }
        });

        if (res.status === 200) {

            const data = await res.text();
            console.log(data);

        } else {
            console.log(`Error code ${res.status}`);
        }
    } catch (err) {
        console.log(err)
    }
}

score 2 · Answer 3 · answered Nov 15 '22 at 09:17

2

pretty easy,

GET the url, with normal fetch req, and first convert response to text and then it's done

fetch('sample-url.csv')
  .then((response) => response.text())
  .then((data) => console.log(data));

answered Nov 15 '22 at 09:17

Vaibhav Goyal

21
1

score 0 · Answer 4 · answered Nov 24 '20 at 08:28

0

CSV is not a JSON file type, so you cant parse as a json text. you can check how to parse CSV text in javascript here : Example JavaScript code to parse CSV data

answered Nov 24 '20 at 08:28

Tinsae

577
5
10

Dula · Answer 5 · 2020-12-03T22:09:17.540

0

I would use the following method and insert it where you are supposed console.log the data.

const parseCSV = (data) => {
  // create empty array
  const csvData = [];
  
  // this will return each line as an individual String
  const lines = data.split("\n");
  
  // loop through the lines and return an array of individual   
  // Strings within the line that are separated by a comma
  
  for (let i = 0; i < lines.length; i++) {
      csvData[i] = lines[i].split(",");
  }
  
  // return an array of arrays 2D array
  // e.g [ [1,2,3], [3,4,5], [6,7,8] ]
  return csvData;
};

edited Dec 03 '20 at 22:09

answered Nov 24 '20 at 08:29

Dula

3
4

You have a syntax error: `csvData[]` -> `csvData = []` – KiraLT Dec 02 '20 at 21:32
Ahhh you are right my friend, thanks for spotting it! – Dula Dec 03 '20 at 22:09

Is is possible to read a .csv file with Javascript fetch API?

5 Answers5