How to convert a CSV file to JSON in Vue

Question

Hello I'm consuming data from an API using Axios, the problem is that this data is in csv format and I'm trying to convert it to a JSON object.

I tried to use some js libraries but none of them worked with Vue

What can I do?

Example:

(This how the data is represented)

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,,,,,

(This is how I want to be displayed)

[
  {
    "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": ""
  }
]

Thanks!

tony19 · Accepted Answer · 2021-05-21 22:03:14Z

3

Split the input string by \n to get the individual lines.
Split the first line by , to get the headers.
Split the following lines by , to get the fields.
Join the headers and fields by index (map the headers into an array of header name and field name), and create an object from the result.

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)

answered May 21, 2021 at 22:03

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert a CSV file to JSON in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related