时间戳

首页 > 解决方案 > 如何在 Vue 中将 CSV 文件转换为 JSON

json - 如何在 Vue 中将 CSV 文件转换为 JSON

问题描述

您好，我正在使用 Axios 使用来自 API 的数据，问题是这些数据是 csv 格式的，我正在尝试将其转换为 JSON 对象。

我尝试使用一些 js 库，但它们都不能与 Vue 一起使用

我能做些什么？

例子：

（这是数据的表示方式）

fecha,casos_total,casos_pcr,casos_test_ac,altas,fallecimientos,ingresos_uci,hospitalizados
2020-02-21,3,3,,,,,
2020-02-22,3,3,,,,,
2020-02-23,3,3,,,,,
2020-02-24,3,3,,,,,
2020-02-25,4,4,,,,,

（这就是我想要显示的方式）

[
  {
    "fecha": "2020-02-21",
    "casos_total": 3,
    "casos_pcr": 3,
    "casos_test_ac": "",
    "altas": "",
    "fallecimientos": "",
    "ingresos_uci": "",
    "hospitalizados": ""
  },
  {
    "fecha": "2020-02-22",
    "casos_total": 3,
    "casos_pcr": 3,
    "casos_test_ac": "",
    "altas": "",
    "fallecimientos": "",
    "ingresos_uci": "",
    "hospitalizados": ""
  },
  {
    "fecha": "2020-02-23",
    "casos_total": 3,
    "casos_pcr": 3,
    "casos_test_ac": "",
    "altas": "",
    "fallecimientos": "",
    "ingresos_uci": "",
    "hospitalizados": ""
  },
  {
    "fecha": "2020-02-24",
    "casos_total": 3,
    "casos_pcr": 3,
    "casos_test_ac": "",
    "altas": "",
    "fallecimientos": "",
    "ingresos_uci": "",
    "hospitalizados": ""
  },
  {
    "fecha": "2020-02-25",
    "casos_total": 4,
    "casos_pcr": 4,
    "casos_test_ac": "",
    "altas": "",
    "fallecimientos": "",
    "ingresos_uci": "",
    "hospitalizados": ""
  }
]

谢谢！

标签： jsonvue.jscsv

解决方案

  1. 拆分输入字符串\n以获取各个行。

  2. 拆分第一行,以获得标题。

  3. 拆分以下行,以获取字段。

  4. 通过索引连接标题和字段（将标题映射到标题名称和字段名称的数组），并根据结果创建一个对象。

const input = `fecha,casos_total,casos_pcr,casos_test_ac,altas,fallecimientos,ingresos_uci,hospitalizados
2020-02-21,3,3,,,,,
2020-02-22,3,3,,,,,
2020-02-23,3,3,,,,,
2020-02-24,3,3,,,,,
2020-02-25,4,4,,,,,`

const lines = input.split('\n') // 1️⃣
const header = lines[0].split(',') // 2️⃣
const output = lines.slice(1).map(line => {
  const fields = line.split(',') // 3️⃣
  return Object.fromEntries(header.map((h, i) => [h, fields[i]])) // 4️⃣
})

console.log(output)

推荐阅读