每日 30 秒 ⏱ CSV 表格数据转换 JSON 对象

livem 发布于2019-08-26 18:18 / 883人阅读

简介

数组、CSV、表格、工具

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

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

代码分析

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

const titlesData = data.slice(0, data.indexOf("
"));
const titles = titlesData.split(delimiter);

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

const rows = data
    .slice(data.indexOf("
") + 1)
    .split("
")

使用 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）。

结构

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]);
}

动手试试：利用 CSVToJSON 和 JSONtoCSV 实现一个简单的数据库？

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个点赞。

如果您想激励小二可以到 Github 给个 小星星。

如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop

GPU云服务器云服务器 json数据转换为js对象 list对象转换成json 云服务器开机要开30秒 json2csv

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110171.html

每日 30 秒 ⏱ JSON对象数组转换 CSV 表格数据

简介数组、对象、CSV、表格、工具我们在每日 30 秒之 arrayToCSV 中一起学习了将数组数据转化为 csv 表格数据并导出，那如果是对象数组怎么办呢？小脑袋瓜转得快的同学肯定会说：使用 Array.prototype.map 把需要导出的字段先遍历取出，再使用 arrayToCSV 将其导出为 CSV 数据表格。可是你有没有想过如果一个对象数组数据非常之大时，使用 Array.p...

Ajian 2019-08-26 13:35 评论0 收藏0
每日 30 秒 ⏱ 数组转CSV表格数据

showImg(https://segmentfault.com/img/remote/1460000018771004?w=900&h=500); 简介数组、CSV、表格、工具将一个数组转化为逗号为分割符的字符串（CSV）即表格数据。 // 该源码来自于 https://30secondsofcode.org const arrayToCSV = (arr, delimiter = ,) =...

nanchen2251 2019-08-23 15:38 评论0 收藏0
每日 30 秒 ⏱ 数据类型大乱炖

showImg(https://segmentfault.com/img/remote/1460000018796041?w=900&h=500); 简介字符串、数字、布尔值、Null、Undefined、对象、数组、函数、判断方法 JavaScript 中有两种数据类型，分别是基本数据类型和引用数据类型：基本数据类型引用数据类型 Number、String、Boolean、Null...

meteor199 2019-08-23 16:08 评论0 收藏0
分享一个免费的在线表格转换工具 - TableConvert

摘要：是一个可以在线转换表格的工具，支持表格表格和表格，并且还内嵌了一个表格编辑器，像微软的一样编辑，使用非常方便。拿到对应表格的后，可以直接在文档中使用该文本。 showImg(https://segmentfault.com/img/bVbwJCE?w=1200&h=674); TableConvert 是一个可以在线转换表格的工具，支持 Markdown 表格、CSV、JSON、XML...

邹强 2019-08-26 10:57 评论0 收藏0