How to Generate CSV using JSON

How to Generate CSV using JSON

For this guide I use static data

Step 1:
I created Page Variable list of object with 2 properties FristName & LastName
image

Step 2
Drag Button or any trigger event but i use button

Step 3
Use Custom JS and Export to download component

For Custom JS “JSON to CSV” code
RED pen - create input property and name it with “jsons” and choose Page Variable in step 1

BLACK pen - Code

const {jsons} = inputs;

var json = jsons
var fields = Object.keys(json[0])
var replacer = function(key, value) { return value === null ? '' : value } 
var csv = json.map(function(row){
  return fields.map(function(fieldName){
    return JSON.stringify(row[fieldName], replacer)
  }).join(',')
})
csv.unshift(fields.join(',')) // add header column
csv = csv.join('\r\n');

var blob = new Blob([csv], { type: 'text/csv' });//'text/csv' 
var csvUrl = (URL || webkitURL).createObjectURL(blob);

console.log(csvUrl);

return { result: csvUrl };

BLUE pen - at is

Export to download setup
image

custom list

10 Likes

@Jhon_Michael_Revilla I managed to get this to work on web preview portal but not on Android. Any idea what might be the issue? Thanks.

1 Like

on android use Pick File and Read File

2 Likes

@Jhon_Michael_Revilla Thanks a bunch. Will give it a try.

hi, can you help me please, i can’t save on android, does anyone know how to do it? an example with Pick File and Read File?

@xDefino I managed to edit the JS code to return the CVS string, instead of the pathURL, then use Write File to save the file to the download folder.



1 Like

well! works fine! many thanks!

I used this technique, too, but I couldn’t get it to work in iOS, because the systemvars directory provided by AppGyver puts the file in some obscure directory, so the user can’t find it. Any idea how I can get the file in a place where the user can easily get to it?

I’m having trouble getting this csv export to work in iOS - the “Export to downloads” module just fails silently. (I did get Android working using Write File as someone else did above.)

My JS module gives a result URL like:
blob:3b9faa13-2c60-491c-b135-8bb334bb8b88?offset=0&size=245

Then, I send the result URL to Export to Downloads as you did, but…nothing. I can’t get an alert to fire after the Export module on the success or error paths.

Anybody see anything I’m doing wrong here? I worked a long time on this feature, and it’s so frustrating to get stuck at the last step…hehe.

Here’s my flow:

Here are my inputs for Export to Downloads (the path is blob:3b9faa13-2c60-491c-b135-8bb334bb8b88?offset=0&size=245):

Copied the exact original steps and it’s not working, giving this error:
[error] [function2:JSON to CSV] TypeError: Cannot convert undefined or null to object

1 Like

Thanks for the guide @Jhon_Michael_Revilla,

I have a table with 12 rows and 5 columns, how would you export that? All the cells are texts. I don’t have any JS experience, but I got at least your tutorial to work.

Thanks for your help

Would also like to know how this would work.

Hi! I can no longer save my exports on Android, before it worked fine I exported the csv / json perfectly in donwload as a textxxx.csv, now I do not receive any error and yet it does not save the file anymore? Has anyone happened the same? can you always save your files? Note: export before saving works well because if I try to share content: for example in email the content is correct.

1 Like