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

7 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.

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?