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?

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);