每日 30 秒 ⏱ CSV 表格数据转换 JSON 对象-CSDN博客

简介

? 更新平台多偶尔会漏掉，如果觉得文章还行点个 star 防走失。

我们之前的两期数组转 CSV 表格数据和 JSON 对象数组转换 CSV 表格数据中学习了转化为 CSV 表格数据的代码片段，今天就讲讲如何把 CSV 表格数据转换为 JSON 对象：

// 该源码来自于 https://30secondsofcode.org
const CSVToJSON = (data, delimiter = ',') => {
  const titles = data.slice(0, data.indexOf('\n')).split(delimiter);
  return data
    .slice(data.indexOf('\n') + 1)
    .split('\n')
    .map(v => {
      const values = v.split(delimiter);
      return titles.reduce((obj, title, index) => ((obj[title] = values[index]), obj), {});
    });
};
复制代码

代码分析

利用 \n 取出表头数据并使用 Array.prototype.split 把表头数据分割为表头字段数组用于构造 JSON 对象的键值：

const titlesData = data.slice(0, data.indexOf('\n'));
const titles = titlesData.split(delimiter);
复制代码

取出表格数据并使用 Array.prototype.split 分割为行数组

const rows = data
    .slice(data.indexOf('\n') + 1)
    .split('\n')
复制代码

使用 Array.prototype.map 遍历所有行数据获得对象数组：

return rows.map(v => {
    // ...
    // 返回创建对象
});
复制代码

遍历过程中进行数据分割和对象拼装：

const values = v.split(delimiter);
titles.reduce((obj, title, index) => (obj[title] = values[index]), obj), {});
复制代码

小技巧：利用 , 运算顺序可以优雅的写出先赋值后返回数据的精简代码。

使用场景

用户上传 CSV 表格数据转化为 JSON 并上传到服务端，这里不对 CSV 的 BOM 进行判断和处理（相关内容可以查看你所不知道 ❌ BOM）。

结构

<input type="file" name="file" onchange="importPostData(this.files)">
复制代码

CSV内容

title,content
pushmetop,让我们一起变得更好
sf,答题平台
掘金,掘金是一个帮助开发者成长的社区
复制代码

脚本

function importPostData(files) {
    const reader = new FileReader();
    reader.onload = function (e) {
        const data = CSVToJSON(e.target.result)
        // 发送数据请求到服务端
    };
    reader.readAsText(files[0]);
}
复制代码