首页 > 解决方案 > 如何在使用地图的反应中将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>


标签: javascriptnode.jsarraysreactjsmern

解决方案


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

详细信息: --unwind [paths]
从单个 JSON 文档创建多行,类似于 MongoDB 展开。--unwind-blank
展开时,空白而不是重复数据。默认为假。(默认:假)


推荐阅读