将数据导出到 JavaScript 中的 CSV

Question

我有以下格式的数据，

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 ，如果我提供以下格式的数据，我会得到 output ，如下所示，数据格式-

[{
    "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"
}]

Output CSV-

Answer 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>

Answer 2

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

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

然后迭代数据的键，并为每个键 output 它（例如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>