javascript - 如何在使用地图的反应中将json转换为csv
问题描述
我已经在单击按钮时将 json 数据转换为 csv,但实际上它们存储在 ,(逗号)中的 csv 文件中会发生什么,但我希望它们在行中分开。我怎样才能做到这一点
示例= Minor,Minor 但我希望它们在单独的行中。
这是我的代码和图像。
这是 csv 文件,其中次要次要和 id 在同一行中我想将它们分隔在另一行中
const apiForId = async() =>{
console.log("The value of isCheck", isCheck)
await axios.post(`${process.env.REACT_APP_API_UfL}/export/packs/`,isCheck
)
.then((res) => {
console.log(res)
setValue(res.data)
})
}
// Here download DataA
const downloadData = async(e) =>{
await apiForId()
down.current.click();
}
const data = value.map(item=>({
_id:item._id,
_id_sound:item.pack_sounds_ids.map(data=>data._id),
pack_name:item.pack_name,
chord_att_value:item.pack_sounds_ids.map(data=>data.chord_type_id.att_value),
instrumendts_att_value:item.pack_sounds_ids.map(data=>data.instruments_ids.map(ele => ele.att_value)),
key_att_value:item.pack_sounds_ids.map(item=>item.key_id.att_value),
maininstrument_att_value:item.pack_sounds_ids.map(item=>item.maininstrument_id.att_value),
product_att_value:item.pack_sounds_ids.map(item=>item.product_type_id.att_value),
refrence_att_value:item.pack_sounds_ids.map(item=>item.references_ids.map(ele=>ele.att_value)),
root_att_value:item.pack_sounds_ids.map(item=>item.root_note_id.att_value),
sound_bpm:item.pack_sounds_ids.map(item=>item.sound_bpm),
sound_index:item.pack_sounds_ids.map(item=>item.sound_index),
sound_name:item.pack_sounds_ids.map(item=>item.sound_name),
tags_att_value:item.pack_sounds_ids.map(item=>item.tags_ids.map(ele=>ele.att_value))
}))
const headers = [
{
label:"Pack ID",
key:"_id",
},
{
label:"Sound ID",
key:"_id_sound",
},
{
label:"Pack Name",
key:"pack_name",
},
{
label:"Chord",
key:"chord_att_value",
},
{
label:"Instruments",
key:"instrumendts_att_value",
},
{
label:"Key",
key:"key_att_value",
},
{
label:"Maininstrument",
key:"maininstrument_att_value",
},
{
label:"Product Type",
key:"product_att_value",
},
{
label:"Refrences",
key:"refrence_att_value",
},
{
label:"Root Note",
key:"root_att_value",
},
{
label:"BPM",
key:"sound_bpm",
},
{
label:"Index",
key:"sound_index",
},
{
label:"Name",
key:"sound_name",
},
{
label:"Tags",
key:"tags_att_value",
},
]
//BUTTON
<Button className="mx-5" onClick={downloadData}> Download CSV</Button>
<CSVLink headers={headers} data={data}><span ref={down}></span></CSVLink>
解决方案
使用此模块https://www.npmjs.com/package/json2csv并使用选项 unwind 您可以将其设置为 1 到多行。
详细信息: --unwind [paths]
从单个 JSON 文档创建多行,类似于 MongoDB 展开。--unwind-blank
展开时,空白而不是重复数据。默认为假。(默认:假)
推荐阅读
- karma-jasmine - Angular Firestore jasmine 测试条件在 colleciton 中
- django - 是否可以在制作 DjangoModelFactory 时获取工厂男孩 Faker 对象的值以用于另一个字段
- css - CSS - 使用 max 为特定长度的 minmax 时,网格自动调整不起作用
- html - Flexbox 在增加项目宽度的同时保持包裹点
- typescript - 如何从 TypeScript 中的字符串值数组推断类型?
- python - Pydantic:导出具有不同编码的相同类型的字段
- php - 使用 Jenkins Pipeline 将 PHP 部署到 Azure Web App 时出错
- macos - 找到了 Libfreetype.6.dylib,但架构错误
- r - tidyr::pivot_longer 合并 2 组列,每组具有不同的名称前缀
- javascript - 在 javascript azure 函数中使用 Azure 的 azcopy 工具