如何在使用地图的反应中将json转换为csv答案

【问题标题】：how to convert json to csv in react using map如何在使用地图的反应中将json转换为csv
【发布时间】：2021-11-21 07:48:16
【问题描述】：

我已经在单击按钮时将 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>

【问题讨论】：

标签： javascript node.js arrays reactjs mern

【解决方案1】：

使用此模块https://www.npmjs.com/package/json2csv 并使用选项展开，您可以将其设置为 1 到多行。

详情： --unwind [路径]
从单个 JSON 文档创建多行，类似于 MongoDB 展开。 --展开空白
展开时，空白而不是重复数据。默认为假。（默认：假）

【讨论】：