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.

CodePudding user response：

I 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;
}