Javascript 将对象嵌套到react中可下载的CSV中

我有以下数据，下载后可以xls/csv格式查看。我使用的是react csv npm包，它在相同的列中显示名称和描述，而不是在不同的列中

我需要一些帮助来弄清楚如何显示在不同列中显示名称、描述和角色的数据，如下所示

数据：-

 const csvData = [
    {
        name: 'Data science training',
        description:
            'Data Science certification training',
        
       suggestedRoles: [
            { id: 16, category: 'DEVELOPER', name: 'Data Engineer' },
            { id: 17, category: 'DEVELOPER', name: 'Data Scientist' }]
        },{
         name: 'AWS',
        description:
            'AWS certification training',
        
       suggestedRoles: [
            { id: 16, category: 'DEVELOPER', name: 'Cloud Engineer' },
            { id: 17, category: 'DEVELOPER', name: 'Network Engineer' }]
}],

预期产出：-

Name                        Description                                    RoleName
Data Science Training       Data Science Certification Training             Data Engineer
                                                                            Data Scientist
AWS Training                AWS Certification Training                      Cloud Engineer
                                                                            Network Engineer

电流输出：-

Name                                    Description                                                         RoleName
Data Science Training,AWS Training         Data Science Certification Training, AWS Certification Training    Data Engineer,Data Scientist,Cloud Engineer,Network Engineer

代码：-

export const ReactCsv = () => {
    const createCsvFileName = ()=> `data_${moment().format()}.csv`;
    const headers = [
        { label: 'Name', key: 'name' },
        { label: 'Description', key: 'description' },
        { label: 'SuggestedRoles', key: 'suggestedRoles' }
    ];

    const data = [
        {
            name: csvData.map((_)=>_.name),
            description: csvData.map((_)=>_.description),
            suggestedRoles: csvData.map((_)=>_.suggestedRoles.map((role)=>role.name)),
        }
    ];

    return (
        <CSVLink
            data={data}
            headers={headers}
            filename={createCsvFileName()}
            target="_blank"
            style={{ textDecoration: 'none', outline: 'none', height: '5vh' }}
        >
            <Button variant="contained" color="secondary" style={{ height: '100%' }}>
                Download CSV
            </Button>
        </CSVLink>
    );
};

export const ReactCsv=（）=>{
const createCsvFileName=（）=>`data_${moment（）.format（）}.csv`；
常量头=[
{label:'Name'，key:'Name'}，
{标签：'Description'，键：'Description'}，
{label:'SuggestedRoles'，key:'SuggestedRoles'}
];
常数数据=[
{
名称：csvData.map（（），
description:csvData.map（（）=>.description），
suggestedRoles:csvData.map（（），
}
];
返回(
下载CSV
);
};

您的

csv

的

数据

生成代码应更改为类似的代码

export const ReactCsv = () => {
    const createCsvFileName = ()=> `data_${moment().format()}.csv`;
    const headers = [
        { label: 'Name', key: 'name' },
        { label: 'Description', key: 'description' },
        { label: 'SuggestedRoles', key: 'suggestedRoles' }
    ];

    let data = []
    csvData.forEach(item => {
        data.push({
            name: item.name,
            description: item.description,
            suggestedRoles: item.suggestedRoles[0].name
        });
        for (let i = 1; i < item.suggestedRoles.length; i++) {
            const role = item.suggestedRoles[i];
            data.push({
                name: '',
                description: '',
                suggestedRoles: role.name
            });
        }
    });

    return (
        <CSVLink
            data={data}
            headers={headers}
            filename={createCsvFileName()}
            target="_blank"
            style={{ textDecoration: 'none', outline: 'none', height: '5vh' }}
        >
            <Button variant="contained" color="secondary" style={{ height: '100%' }}>
                Download CSV
            </Button>
        </CSVLink>
    );
};

export const ReactCsv=（）=>{
const createCsvFileName=（）=>`data_${moment（）.format（）}.csv`；
常量头=[
{label:'Name'，key:'Name'}，
{标签：'Description'，键：'Description'}，
{label:'SuggestedRoles'，key:'SuggestedRoles'}
];
让数据=[]
csvData.forEach（项目=>{
数据推送({
名称：item.name，
description:item.description，
suggestedRoles:item.suggestedRoles[0]。名称
});
for（设i=1；i

数据变量必须是对象数组，而不是单个对象数组，其中每个属性都是值数组

const csvData=[{
名称：“数据科学培训”，
描述：“数据科学认证培训”，
建议的洞：[{
身份证号码：16，
类别:"发展商",，
名称：“数据工程师”
},
{
身份证号码：17，
类别:"发展商",，
姓名：“数据科学家”
}
]
}, {
名称：“AWS”，
说明：“AWS认证培训”，
建议的洞：[{
身份证号码：16，
类别:"发展商",，
名称：“云工程师”
},
{
身份证号码：17，
类别:"发展商",，
名称：“网络工程师”
}
]
}];
常量数据=csvData.map（项=>({
名称：item.name，
description:item.description，
suggestedRoles:item.suggestedRoles.map（角色=>role.name），
}))
控制台日志（数据）应该通过深度迭代csvData来操作数据。检查我的答案-非常感谢。工作如期进行。