如何删除此 CSV 生成器 for 循环中的多余逗号

Question

我有一组嵌套在数组中的对象。

我明白为什么 for 循环在行的末尾添加逗号，但我很难找到更好的方法来编写这个（全新的编程），里面没有逗号循环。

有没有更好的写法？

function createCSV() {
    
    // CREATE THE CSV VARIABLE
    let csvContent = "data:text/csv;charset=utf-8,"
    let headers = "date,account,vendor,amount,recurring,description,notes"
    csvContent += headers + "\r\n"
    
    // ITERATE THE ARRAY INTO THE CSV SEPARATED BY COMMAS
    adjustments.forEach(element => {

        // EACH ARRAY ITEM
        let row
        
        //EACH OBJECT PROPERTY
        for (const property in element) {
            row += element[property]
            row += ','
          }

        csvContent += row + "\r\n";
    });

    // DOWNLOAD THE CSV
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "empower_data.csv");
    document.body.appendChild(link); // Required for FF
    link.click();
    console.log('CSV DOWNLOADED')
}

Answer 1

使用数组和数组连接

function createCSV() {
    let csvContent = "data:text/csv;charset=utf-8,";
    let headers = "date,account,vendor,amount,recurring,description,notes";
    csvContent += headers + "\r\n";

    adjustments.forEach(element => {
        // begin changes
        let row = [];
        for (const property in element) {
            row.push(element[property]);
        }
        csvContent += row.join(',') + "\r\n";
        // end changes
    });

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "empower_data.csv");
    document.body.appendChild(link);
    link.click();
    console.log('CSV DOWNLOADED');
}

更好 - 将所有内容替换为

function createCSV() {
    let csvContent = "data:text/csv;charset=utf-8,";
    let headers = "date,account,vendor,amount,recurring,description,notes";
    csvContent += headers + "\r\n";

    adjustments.forEach(element => {
        // begin changes
        csvContent += Object.values(element).join(',') + "\r\n";
        // end changes
    });

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "empower_data.csv");
    document.body.appendChild(link);
    link.click();
    console.log('CSV DOWNLOADED');
}

或真正简洁的代码

function createCSV() {
    let csvContent = "data:text/csv;charset=utf-8,";
    let headers = "date,account,vendor,amount,recurring,description,notes";

    csvContent += headers + "\r\n";
    // begin changes
    csvContent += adjustments.map(
        element => Object.values(element).join(',')
    ).join('\r\n');
    // end changes
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "empower_data.csv");
    document.body.appendChild(link);
    link.click();
    console.log('CSV DOWNLOADED');
}

作为最后的说明：由于 object 属性没有定义的“顺序” - 您可能想做这样的事情

function createCSV() {
    const properties = ['date','account','vendor','amount','recurring','description','notes'];
    let csvContent = "data:text/csv;charset=utf-8,";
    let headers = "date,account,vendor,amount,recurring,description,notes";

    csvContent += headers + "\r\n";
    // begin changes
    csvContent += adjustments.map(element => properties.map(prop => element[prop]).join(',')).join('\r\n');
    // end changes
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "empower_data.csv");
    document.body.appendChild(link);
    link.click();
    console.log('CSV DOWNLOADED');
}

在上面，我假设 object 中的属性名称与 CSV 列 headers 相同，但是，当然，情况不一定如此（我根本不知道）

Answer 2

最好的方法是使用数组而不是字符串连接，并用 array.join() 完成：

function createCSV() {
    
    // CREATE THE CSV VARIABLE
    let csvContent = "data:text/csv;charset=utf-8,"
    let headers = "date,account,vendor,amount,recurring,description,notes"
    csvContent += headers + "\r\n"
    
    // ITERATE THE ARRAY INTO THE CSV SEPARATED BY COMMAS
    adjustments.forEach(element => {

        // EACH ARRAY ITEM
        const row = [];
        
        //EACH OBJECT PROPERTY
        for (const property in element) {
            row.push(element[property]);
        }

        csvContent += row.join(',') + "\r\n";
    });

    // DOWNLOAD THE CSV
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "empower_data.csv");
    document.body.appendChild(link); // Required for FF
    link.click();
    console.log('CSV DOWNLOADED')
}

如何删除此 CSV 生成器 for 循环中的多余逗号

How do I remove the extra comma in this CSV generator for loop

javascript

csv

arrays

iteration

loops