Skip to main content
4 of 4
First pass at code cleanup, spelling and other readability improvements
Moonpie
  • 2.7k
  • 6
  • 15
  • 29

Empty Column in Csv , when exporting data as csv using Lwc component

I'm very new to salesforce and lwc , i'm trying to Export some static and some dynamic data in a csv using LWC Salesforce and succeeded in that( except with a new column has been added from the second line .) ![enter image description here

In the above image : There are two issues i'm facing :

  1. First row (A1) name needs to be just Name . i have passed just 'Name',You can see in below code s=[] ( Undefined is added automatically ).Due to the lwc example i'm using . I need some help in removing unwanted code.
  2. From the second row , Unwanted column is being added, Whenever i used '\n' to change row . The following is the lwc code**
****/*  Row 1 : Static Data (so adding directly in array S[]) */****
exportToCSV() {  
    let s =["Name", "Example Data", "Field Type", "Data Category", "Data Category Definition", "Data Classification"]; 
              ==>  [this.columnHeaderLists1] ==> Data from Apex 
    for(let d in this.columnHeaderLists1){
        s.push("\"" + this.columnHeaderLists1[d] + "\"");
    }
    s.push("\n");
    
****/*  Row 2 :Dynaimic data fetching from Apex using Lwc Wire */****
    for(let key in this.columnHeaderList){
        let t;
              ==> [this.columnHeaderLists] ==> Data from Apex
        t = this.columnHeaderList[key].subcolumn;
        for(let key in t){
            s.push("\"" + t[key] + "\"");
        }
    }
    s.push("\n");
}
      
//Passing the s[] to column headers 
let columnHeader = s;

**[ I'm not using the below code , which requires a pojo*/
   /* Our code has data from multiple queries so , it is complex to add a pojo and utilize the below code ]**
let jsonKeys = [];
var jsonRecordsData = []; 
console.log('length ',jsonRecordsData.length);
let csvIterativeData;  
let csvSeperator  
let newLineCharacter;  
csvSeperator = ",";  
newLineCharacter = "\n";  
// csvIterativeData = "";  
csvIterativeData += columnHeader.join(csvSeperator);  
csvIterativeData += newLineCharacter;  
for (let i = 0; i < jsonRecordsData.length; i++) {  
    let counter = 0;  
    for (let iteratorObj in jsonKeys) {  
        let dataKey = jsonKeys[iteratorObj];  
        if (counter > 0) {  csvIterativeData += csvSeperator;  }  
        if (  jsonRecordsData[i][dataKey] !== null && jsonRecordsData[i][dataKey] !== undefined ) { 
            csvIterativeData += '"' + jsonRecordsData[i][dataKey] + '"';
        } else {  
            csvIterativeData += '""';  
        }  
        counter++;  
    }  
    csvIterativeData += newLineCharacter;  
}  
console.log("csvIterativeData", csvIterativeData);  
this.hrefdata = "data:text/csv;charset=utf-8," + encodeURI(csvIterativeData);  
}
}

Exaplanation:

We are basically passing the data to array S[] (using s.push) . We have pushed data to row . After 1 row of data we are using '\n' to go new line . . Right after using '\n' cursor is moving to next row and also an empty column is being created in the next row. (Can be observed from row:2)

  1. In row2 we need to pass data from A2 . But Due to empty column . Data is populating from B2. I need help in resolving this . Is that a right approach of passing values to the csv Desired Out-put : enter image description here Any suggestion is appreciated , Thankyou .