Can I fetch a Readable Stream then convert to JSON client side?

Question

I'm hoping to use a Google Sheets CSV as a data source. I'd like to fetch the CSV data on the client, then convert into JSON.

I'm able to fetch the CSV, which returns a ReadableStream. However, I'm not sure how to correctly read that response and convert into JSON.

I've found an npm package which should help convert the CSV data to JSON, but having a little bit of a time working with the stream.

Example: https://jsfiddle.net/21jeq1h5/3/

Can anyone point me in the right direction to use the ReadableStream?

Taradiddle

The readable stream from that URL contains an HTML file - not CSV. Here is a fiddle to show that:jsfiddle.net/21jeq1h5/4 – Coacher

Yes, yes it is 🙈 – Taradiddle

OK...then. Provide a link to an open sheet...I'll answer you question. – Coacher

docs.google.com/spreadsheets/d/e/… – Taradiddle

Answer 1

Since CSV is simply text, the solution is the use the response.text() method of the fetch() API.

https://developer.mozilla.org/en-US/docs/Web/API/Body/text

Once the text is onboard, it is as simple as parsing the CSV out of the file. If you want objects as an output it is imperative the headers are included in the CSV (which yours are).

I've included the code snippet below. It won't run on SO because SO sets the origin to null on AJAX requests. So I've also included a link to a working codepen solution.

fetch('https://docs.google.com/spreadsheets/d/e/KEY&single=true&output=csv')
  .then(response => response.text())
  .then(transform);

function transform(str) {
  let data = str.split('\n').map(i=>i.split(','));
  let headers = data.shift();
  let output = data.map(d=>{obj = {};headers.map((h,i)=>obj[headers[i]] = d[i]);return obj;});
  console.log(output);
}

Pen

https://codepen.io/randycasburn/pen/xjzzvW?editors=0012

Edit

I should add that if you truly want this in a JSON string (per your question), you can run

json = JSON.stringify(output);

Coacher

@vinnie-james What you have suggested does not get return the response as ReadableStream. The response.text() will return the entire text from the resource instead of getting the data in chunks. I hope its what you wanted otherwise the solution is wrong. – Citrate