在 JavaScript 中将数据导出为 CSV答案

【问题标题】：Export data into a CSV in JavaScript在 JavaScript 中将数据导出为 CSV
【发布时间】：2021-08-09 14:55:36
【问题描述】：

我有以下格式的数据，

const data = {
    "Class-1": [{
        "section": "A",
        "total": "45",
        "boys": "31",
        "girls": "14",
        "subjects": 3,
        "class-teacher": "ABC"
    }, {
        "section": "B",
        "total": "30",
        "boys": "20",
        "girls": "10",
        "subjects": 3,
        "class-teacher": "XYZ"
    }],
    "Class-2": [{
        "section": "A",
        "total": "40",
        "boys": "25",
        "girls": "15",
        "subjects": 4,
        "class-teacher": "ABC2"
    }],
    "Class-3": [{
        "section": "A",
        "total": "44",
        "boys": "29",
        "girls": "15",
        "subjects": 4,
        "class-teacher": "ABC3"
    }, {
        "section": "B",
        "total": "40",
        "boys": "29",
        "girls": "11",
        "subjects": 4,
        "class-teacher": "XYZ1"
    }],
    "Class-4": [{
        "section": "A",
        "total": "50",
        "boys": "30",
        "girls": "20",
        "subjects": 5,
        "class-teacher": "ABC4"
    }]
}

我想用 JavaScript 将上述数据导出为 CSV 文件，如下图所示，

我尝试使用d3-dsv (this)，但无法达到预期的效果。使用d3-dsv，如果我将数据展平为一个直接的对象数组，我不会得到类 - Class-1、Class-2、Class-3 和 Class-4。

使用d3-dsv，如果我提供以下格式的数据，我会得到如下附件的输出， 数据格式-

[{
    "section": "A",
    "total": "45",
    "boys": "31",
    "girls": "14",
    "subjects": 3,
    "class-teacher": "ABC"
}, {
    "section": "B",
    "total": "30",
    "boys": "20",
    "girls": "10",
    "subjects": 3,
    "class-teacher": "XYZ"
}, {
    "section": "A",
    "total": "40",
    "boys": "25",
    "girls": "15",
    "subjects": 4,
    "class-teacher": "ABC2"
}, {
    "section": "A",
    "total": "44",
    "boys": "29",
    "girls": "15",
    "subjects": 4,
    "class-teacher": "ABC3"
}, {
    "section": "B",
    "total": "40",
    "boys": "29",
    "girls": "11",
    "subjects": 4,
    "class-teacher": "XYZ1"
}, {
    "section": "A",
    "total": "50",
    "boys": "30",
    "girls": "20",
    "subjects": 5,
    "class-teacher": "ABC4"
}]

以 CSV 格式输出-

【问题讨论】：

从转换的角度来看，将标题（部分、总计等）放在第 1 行和下面的其他内容会更简单......您是否需要第 1 行的 Class-1 和第 2 行的标题？
你试过的代码在哪里？
stackoverflow.com/questions/8847766/…
@RobinMackenzie 如果不是行，我不介意为类添加单独的列。喜欢班级，部分，总，男孩，女孩，科目，班主任。
@RobinMackenzie 我编辑了我的问题，请看一下

标签： javascript d3.js formatter export-csv

【解决方案1】：

迭代Object.entries()，每次迭代创建子标题行并迭代它的数组以推送数据行

const headings = ['section', 'total','boys', 'girls', 'subjects', 'class-teacher'];

const rows = [headings];

Object.entries(data).forEach(([k, arr])=>{
    const subHeadRow = Array.from(headings, (el,i) => i ? '' : k); 
    rows.push(subHeadRow)
    arr.forEach(o => rows.push(Object.values(o)));
});

const csv = rows.map(row => row.map(JSON.stringify)).join('\r\n')

console.log(csv)

<script>
const data={"Class-1":[{section:"A",total:"45",boys:"31",girls:"14",subjects:3,"class-teacher":"ABC"},{section:"B",total:"30",boys:"20",girls:"10",subjects:3,"class-teacher":"XYZ"}],"Class-2":[{section:"A",total:"40",boys:"25",girls:"15",subjects:4,"class-teacher":"ABC2"}],"Class-3":[{section:"A",total:"44",boys:"29",girls:"15",subjects:4,"class-teacher":"ABC3"},{section:"B",total:"40",boys:"29",girls:"11",subjects:4,"class-teacher":"XYZ1"}],"Class-4":[{section:"A",total:"50",boys:"30",girls:"20",subjects:5,"class-teacher":"ABC4"}]};
</script>

【讨论】：

【解决方案2】：

根据@charlieftl，您不需要 D3 来执行此操作。但是，如果您想使用 d3-dsv 库，请查看 d3.csvFormatBody，它将采用对象数组并仅提供 csv 格式的行数据，即没有标题。

在下面的示例中，对于第一行，标题来自第一个键的第一个数组项。

然后迭代数据的键并为每个键输出它（例如Class-1）在一行上，然后下面的行来自数组属性。

// linefeed
const lf = `\r\n`;
// keys of object are Class-1, Class-2 etc
const keys = Object.keys(data);
// get headers from 1st array item of 1st key
const headers = Object.keys(data[keys[0]][0]);
// initialise the csv output with the headers
let csv = `${headers}${lf}`;
// for each key, add the Class-N then the rows (with no headers)
keys.forEach(key => csv += `${key}${lf}${d3.csvFormatBody(data[key])}${lf}`);
// output
console.log(csv);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<script>
const data={"Class-1":[{section:"A",total:"45",boys:"31",girls:"14",subjects:3,"class-teacher":"ABC"},{section:"B",total:"30",boys:"20",girls:"10",subjects:3,"class-teacher":"XYZ"}],"Class-2":[{section:"A",total:"40",boys:"25",girls:"15",subjects:4,"class-teacher":"ABC2"}],"Class-3":[{section:"A",total:"44",boys:"29",girls:"15",subjects:4,"class-teacher":"ABC3"},{section:"B",total:"40",boys:"29",girls:"11",subjects:4,"class-teacher":"XYZ1"}],"Class-4":[{section:"A",total:"50",boys:"30",girls:"20",subjects:5,"class-teacher":"ABC4"}]};
</script>

【讨论】：