I have an url that returns json object.
I need to have an button with onClick function that will call that API, get the json object, convert it to CSV and allow user to download it on thier local machine.
The CSV file should have structure as follows:
"Header 1","Header 2","Header 3","Header 4","Header 5","Header 6","Header 7","Header 8","Header 9","Header 10","Header 11","Header 12"
"B-E7BE5602-2F9B-E3","11608501","Active","2023-06-29","1","0","1","ID","OPEN","Yes","Yes","FLOWER"
"B-480A8929-57D5-97","11608502","Active","2023-06-29","1","0","1","ID","OPEN","No","No","FLOWER"
this is the json I get from the API:
{
"items": {
"recordsFiltered": 2,
"data": [{
"numOfIds": 1,
"productId": null,
"askOrgId": "Yes",
"orderId": 11608501,
"orgSelectionType": "FLOWER",
"batchCode": "B-E7BE5602-2F9B-E3",
"IDType": "OPEN",
"batchId": 413,
"creationDate": "2022-06-29",
"isOnline": "Yes",
"productName": null,
"batchProductArray": [{
"ID": 663255,
"TYPE": "PRODUCT",
"NAME": "SOME NAME"
}
],
"numOfUsedIDs": 0,
"redemptionMethod": "ID",
"askSSN": "No",
"askEmployeeId": "Yes",
"batchStatus": "Active",
"productType": null,
"expirationDate": "2023-06-29"
}, {
"numOfIds": 1,
"productId": null,
"askOrgId": "No",
"orderId": 11608502,
"orgSelectionType": "LEAF",
"batchCode": "B-480A8929-57D5-97",
"IDType": "OPEN",
"batchId": 414,
"creationDate": "2022-06-29",
"isOnline": "Yes",
"productName": null,
"batchProductArray": [{
"ID": 663255,
"TYPE": "PRODUCT",
"NAME": "Other Name"
}
],
"numOfUsedIDs": 0,
"redemptionMethod": "ID",
"askSSN": "No",
"askEmployeeId": "No",
"batchStatus": "Active",
"productType": null,
"expirationDate": "2023-06-29"
},
],
"draw": 1,
"recordsTotal": 2
}
}
I tried below code but it gives me that my json is undefined
function downloadJSONAsCSV(endpoint) {
// Fetch JSON data from the endpoint
fetch(endpoint)
.then(response => response.json())
.then(jsonData => {
// Convert JSON data to CSV
let csvData = jsonToCsv(jsonData);
// Create a CSV file and allow the user to download it
let blob = new Blob([csvData], { type: 'text/csv' });
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'data.csv';
document.body.appendChild(a);
a.click();
})
.catch(error => console.error(error));
}
function jsonToCsv(jsonData) {
let csv = '';
// Get the headers
let headers = Object.keys(jsonData[0]);
csv += headers.join(',') + '\n';
// Add the data
jsonData.forEach(function(row) {
let data = headers.map(header => row[header]).join(',');
csv += data + '\n';
});
return csv;
}
Plus I belive that the code above will not format the CSV file in the format I need.
I have an url that returns json object.
I need to have an button with onClick function that will call that API, get the json object, convert it to CSV and allow user to download it on thier local machine.
The CSV file should have structure as follows:
"Header 1","Header 2","Header 3","Header 4","Header 5","Header 6","Header 7","Header 8","Header 9","Header 10","Header 11","Header 12"
"B-E7BE5602-2F9B-E3","11608501","Active","2023-06-29","1","0","1","ID","OPEN","Yes","Yes","FLOWER"
"B-480A8929-57D5-97","11608502","Active","2023-06-29","1","0","1","ID","OPEN","No","No","FLOWER"
this is the json I get from the API:
{
"items": {
"recordsFiltered": 2,
"data": [{
"numOfIds": 1,
"productId": null,
"askOrgId": "Yes",
"orderId": 11608501,
"orgSelectionType": "FLOWER",
"batchCode": "B-E7BE5602-2F9B-E3",
"IDType": "OPEN",
"batchId": 413,
"creationDate": "2022-06-29",
"isOnline": "Yes",
"productName": null,
"batchProductArray": [{
"ID": 663255,
"TYPE": "PRODUCT",
"NAME": "SOME NAME"
}
],
"numOfUsedIDs": 0,
"redemptionMethod": "ID",
"askSSN": "No",
"askEmployeeId": "Yes",
"batchStatus": "Active",
"productType": null,
"expirationDate": "2023-06-29"
}, {
"numOfIds": 1,
"productId": null,
"askOrgId": "No",
"orderId": 11608502,
"orgSelectionType": "LEAF",
"batchCode": "B-480A8929-57D5-97",
"IDType": "OPEN",
"batchId": 414,
"creationDate": "2022-06-29",
"isOnline": "Yes",
"productName": null,
"batchProductArray": [{
"ID": 663255,
"TYPE": "PRODUCT",
"NAME": "Other Name"
}
],
"numOfUsedIDs": 0,
"redemptionMethod": "ID",
"askSSN": "No",
"askEmployeeId": "No",
"batchStatus": "Active",
"productType": null,
"expirationDate": "2023-06-29"
},
],
"draw": 1,
"recordsTotal": 2
}
}
I tried below code but it gives me that my json is undefined
function downloadJSONAsCSV(endpoint) {
// Fetch JSON data from the endpoint
fetch(endpoint)
.then(response => response.json())
.then(jsonData => {
// Convert JSON data to CSV
let csvData = jsonToCsv(jsonData);
// Create a CSV file and allow the user to download it
let blob = new Blob([csvData], { type: 'text/csv' });
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'data.csv';
document.body.appendChild(a);
a.click();
})
.catch(error => console.error(error));
}
function jsonToCsv(jsonData) {
let csv = '';
// Get the headers
let headers = Object.keys(jsonData[0]);
csv += headers.join(',') + '\n';
// Add the data
jsonData.forEach(function(row) {
let data = headers.map(header => row[header]).join(',');
csv += data + '\n';
});
return csv;
}
Plus I belive that the code above will not format the CSV file in the format I need.
Share Improve this question edited Jan 26, 2023 at 21:28 jabaa 6,9983 gold badges15 silver badges39 bronze badges asked Jan 26, 2023 at 21:06 LennyLenny 9271 gold badge14 silver badges37 bronze badges 4- In which line do you get the error? – jabaa Commented Jan 26, 2023 at 21:11
- let csvData = jsonToCsv(jsonData); brings me to .catch(error => console.error(error)); } – Lenny Commented Jan 26, 2023 at 21:12
-
1
What do you see when you open the debugger with a breakpoint in
let csvData = jsonToCsv(jsonData);and analyzejsonData? What is the actual valua? Does the given answer solve your problem? – jabaa Commented Jan 26, 2023 at 21:28 -
Just a reminder, it's better to revoke the blob URL after
a.click();to free some memory. – L_K Commented Nov 14, 2023 at 3:14
1 Answer
Reset to default 5I believe that the problem with your code is that you try to convert the root node of the json data to csv instead of the data one, to fix this you just need to change jsonToCsv(jsonData) to jsonToCsv(jsonData.items.data). Additionally you will need to add a JSON.stringify statement around for data mapping function. Iv'e made the necessary changes to your code and attached them below
function downloadJSONAsCSV(endpoint) {
// Fetch JSON data from the endpoint
fetch(endpoint)
.then(response => response.json())
.then(jsonData => {
// Convert JSON data to CSV
let csvData = jsonToCsv(jsonData.items.data); // Add .items.data
// Create a CSV file and allow the user to download it
let blob = new Blob([csvData], { type: 'text/csv' });
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'data.csv';
document.body.appendChild(a);
a.click();
})
.catch(error => console.error(error));
}
function jsonToCsv(jsonData) {
let csv = '';
// Get the headers
let headers = Object.keys(jsonData[0]);
csv += headers.join(',') + '\n';
// Add the data
jsonData.forEach(function (row) {
let data = headers.map(header => JSON.stringify(row[header])).join(','); // Add JSON.stringify statement
csv += data + '\n';
});
return csv;
}