【前端demo】CSV&JSON转换器 原生实现：CSV转换为JSON，JSON转换为CSV

最新推荐文章于 2024-03-15 09:34:18 发布
最新推荐文章于 2024-03-15 09:34:18 发布
阅读量737 收藏
点赞数
分类专栏： 前端demo 文章标签： 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karshey/article/details/132655998
版权

文章目录

其他demo

效果

在这里插入图片描述

效果预览：CSV&JSON Converter (codepen.io)

参照的预览：JSV Converter(gpaiva00.github.io)

参考：

gpaiva00/json-csv: 💡 JSON ↔️ CSV Converter(github.com)

JSV Converter(gpaiva00.github.io)

JSON to CSV Converter(codepen.io)

CSV to JSON Converter(codepen.io)

过程

textarea

禁止拉伸

style="resize:none"

选择textarea中的placeholder：用伪元素

textarea::placeholder{

}

选中textarea不出现边框

outline: none;

Tooltip提示工具

CSS 提示工具(Tooltip) | 菜鸟教程 (runoob.com)

效果是这样：鼠标悬停在按钮上就会显示提示。

在这里插入图片描述

其实是：

在这里插入图片描述
代码：https://www.runoob.com/try/try.php?filename=trycss_tooltip_arrow_left

/* tooltip和tooltiptext 鼠标悬停显示提示 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after是向左指的小箭头：

在这里插入图片描述

在这里插入图片描述

按钮的min-width

设置按钮min-width：如果是width:10vw，当窗口压缩到很小时，里面的字就压缩到看不到了 。

min-width: 10vw;

在这里插入图片描述

判断输入是否是CSV或JSON

要判断输入的CSV或JSON是否是对应类型，不是的话就alert提示，并不予转换。

// 判断是否是CSV或JSON
function judgeCSV(fileContent) {
    fileContent = fileContent.split(',')

    if (!fileContent.length) return false;

    for (let i = 0; i < fileContent.length; i++) {
        const item = fileContent[i].trim()
        if (!item.length) return false;
    }

    return true;
}

function judgeJSON(fileContent) {
    // 尝试解析,可以解析就是JSON,报错就不是
    try {
        JSON.parse(fileContent);
        return true;
    } catch (error) {
        return false;
    }
}

JSON与CSV样例

JSON：

[{"Id":1,"UserName":"Sam Smith"},
{"Id":2,"UserName":"Fred Frankly"},
{"Id":1,"UserName":"Zachary Zupers"}]

CSV：

Id,UserName
1,Sam Smith
2,Fred Frankly
1,Zachary Zupers

JSON转为CSV

  • 先判断是否是对象，不是的话就把JSON转为对象 JSON.parse()

  • 转为对象后看是否是数组，不是的话就转为数组（a转为数组的方法：[a]）

  • '\r\n'是CSV的换行符

  • 先获取表头，即数组对象的key

  • 再获取内容，即所有对象的value

// 将JSON转换为CSV或反之
function JSONtoCSV(fileContent) {
    // 将JSON转换为对象
    const jsonInput = typeof fileContent != 'object' ? JSON.parse(fileContent) : fileContent;
    // 转为数组
    let arr = Array.isArray(jsonInput) ? jsonInput : [jsonInput];

    // 表头
    // 如：{ Id: 1, UserName: 'Sam Smith' } 的表头是 Id,UserName

    let ans = ''
    let head = Object.keys(arr[0]).join(',')

    // '\r\n'是CSV的换行符
    ans += head + '\r\n';

    // 内容
    arr.forEach(item => {
        let temp = Object.values(item).join(',');
        ans += temp + '\r\n';
    })

    console.log(ans)
    return ans;
}

参考：

最简单的JS实现json转csv - 阿李云 - 博客园
(cnblogs.com)

使用JavaScript 将Json数据导出CSV文件_javascript
json转csv_Blank__的博客-CSDN博客

CSV转为JSON

发现有很好用的库：

JS小知识，如何将 CSV 转换为 JSON 字符串_前端达人的博客-CSDN博客
csvjson CDN by jsDelivr - A CDN for npm and GitHub

然后发现原生引用库好像有点麻烦。所以还是手动实现。

步骤：在 JavaScript 中将 CSV 转换为 JSON | D栈 - Delft Stack

在这里插入图片描述
这里有一个坑，debugger很久才找出来。

参考链接里输入的CSV的,分隔符后有一个空格：, 。因此代码中也是用, 但我输入的CSV中,中没有空格。

// https://www.delftstack.com/zh/howto/javascript/csv-to-json-javascript/
function CSVtoJSON(fileContent) {
    console.log('------CSVtoJSON------')
    const array = fileContent.toString().split('\n')
    const csvToJsonResult = []
    console.log('array', array)

    // 表头
    const headers = array[0].split(',')

    for (let i = 1; i < array.length; i++) {
        /* Empty object to store result in key value pair */
        const jsonObject = {}
        /* Store the current array element */
        const currentArrayString = array[i]
        let string = ''

        let quoteFlag = 0
        for (let character of currentArrayString) {
            if (character === '"' && quoteFlag === 0) {
                quoteFlag = 1
            }
            else if (character === '"' && quoteFlag == 1) quoteFlag = 0
            if (character === ',' && quoteFlag === 0) character = '|'
            if (character !== '"') string += character
        }

        let jsonProperties = string.split("|")

        for (let j in headers) {
            if (jsonProperties[j].includes(",")) {
                jsonObject[headers[j]] = jsonProperties[j]
                    .split(",").map(item => item.trim())
            }
            else jsonObject[headers[j]] = jsonProperties[j]
        }
        /* Push the genearted JSON object to resultant array */
        csvToJsonResult.push(jsonObject)
    }
    /* Convert the final array to JSON */
    const json = JSON.stringify(csvToJsonResult);
    console.log(json)
    return json
}

不足之处

功能不够严谨，比如输入的CSV是以逗号,分隔，但逗号,后若用空格，理论上应该可以转换为JSON，但这里的代码并不能实现。

可以对输入的CSV预处理一下。

代码

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV&JSON Converter</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>

<body>
    <div class="main">
        <div class="input item">
            <textarea name="" id="inputText" class="inputText" placeholder="请输入CSV或JSON" style="resize:none"></textarea>
        </div>
        <div class="btn">
            <!-- tooltip和tooltiptext 鼠标悬停显示提示 -->
            <button class="tooltip" onclick="handleConvert('csv')">CSV
                <span class="tooltiptext">JSON to CSV</span>
            </button>
            <button class="tooltip" onclick="handleConvert('json')">JSON
                <span class="tooltiptext">CSV to JSON</span>
            </button>
        </div>
        <div class="output item">
            <textarea name="" id="outputText" class="outputText" readonly style="resize:none"></textarea>
        </div>
    </div>
</body>

</html>

CSS

body {
    background-color: #f2efea;
}

.main {
    display: flex;
    margin-top: 15vh;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60vh;
}


.item textarea {
    width: 400px;
    height: 350px;
    background-color: #413e3e;
    border: 15px solid #525252;
    border-radius: 20px;
    padding: 10px;
    color: white;
    /* 选中之后不出现边框 */
    outline: none;
}



.item textarea::placeholder {
    font-size: 16px;
}

.btn {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
}

.btn button {
    height: 50px;
    margin: 15px 0;
    /* 如果是width:10vw 当窗口压缩到很小时,里面的字就压缩到看不到了 */
    min-width: 10vw;
    font-size: 15px;
    border-radius: 5px;
    border: 1px solid;
    color: white;
}

/* first-child button的父元素的首个子button */
button:first-child {
    background-color: #805e73;
}

button:nth-child(2) {
    background-color: #87bcde;
}

/* tooltip和tooltiptext 鼠标悬停显示提示 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 115px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 4px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

/* 向左指的小箭头 */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

JS

// const inputText = document.getElementById('inputText')
// const outputText = document.getElementById('outputText')


function handleConvert(index) {
    const inputText = document.getElementById('inputText')
    console.log(inputText.value)
    const fileContent = String(inputText.value).trim()

    // 若输入为空
    if (!fileContent.length) return;

    // JSON to CSV
    if (index === 'csv') {
        // 若输入的不是JSON,则清空
        if (!judgeJSON(fileContent)) {
            alert('输入的JSON格式错误！');
            clearFields();
            return;
        }

        const outputResult = JSONtoCSV(fileContent)
        const outputText = document.getElementById('outputText')
        outputText.value = outputResult
    }
    // CSV to JSON
    else {
        if (!judgeCSV(fileContent)) {
            alert('输入的CSV格式错误！');
            clearFields();
            return;
        }

        try {
            const outputResult = CSVtoJSON(fileContent)
            const outputText = document.getElementById('outputText')
            outputText.value = outputResult
        } catch (error) {
            // alert('输入的CSV格式错误！')
            return;
        }

    }
}

// 判断是否是CSV或JSON
function judgeCSV(fileContent) {
    fileContent = fileContent.split(',')

    if (!fileContent.length) return false;

    for (let i = 0; i < fileContent.length; i++) {
        const item = fileContent[i].trim()
        if (!item.length) return false;
    }

    return true;
}

function judgeJSON(fileContent) {
    // 尝试解析,可以解析就是JSON,报错就不是
    try {
        JSON.parse(fileContent);
        return true;
    } catch (error) {
        return false;
    }
}

// 将JSON转换为CSV或反之
function JSONtoCSV(fileContent) {
    // 将JSON转换为对象
    const jsonInput = typeof fileContent != 'object' ? JSON.parse(fileContent) : fileContent;
    // 转为数组
    let arr = Array.isArray(jsonInput) ? jsonInput : [jsonInput];

    // 表头
    // 如：{ Id: 1, UserName: 'Sam Smith' } 的表头是 Id,UserName

    let ans = ''
    let head = Object.keys(arr[0]).join(',')

    // '\r\n'是CSV的换行符
    ans += head + '\r\n';

    // 内容
    arr.forEach(item => {
        let temp = Object.values(item).join(',');
        ans += temp + '\r\n';
    })

    console.log(ans)
    return ans;
}

// https://www.delftstack.com/zh/howto/javascript/csv-to-json-javascript/
function CSVtoJSON(fileContent) {
    console.log('------CSVtoJSON------')
    const array = fileContent.toString().split('\n')
    const csvToJsonResult = []
    console.log('array', array)

    // 表头
    const headers = array[0].split(',')

    for (let i = 1; i < array.length; i++) {
        /* Empty object to store result in key value pair */
        const jsonObject = {}
        /* Store the current array element */
        const currentArrayString = array[i]
        let string = ''

        let quoteFlag = 0
        for (let character of currentArrayString) {
            if (character === '"' && quoteFlag === 0) {
                quoteFlag = 1
            }
            else if (character === '"' && quoteFlag == 1) quoteFlag = 0
            if (character === ',' && quoteFlag === 0) character = '|'
            if (character !== '"') string += character
        }

        let jsonProperties = string.split("|")

        for (let j in headers) {
            if (jsonProperties[j].includes(",")) {
                jsonObject[headers[j]] = jsonProperties[j]
                    .split(",").map(item => item.trim())
            }
            else jsonObject[headers[j]] = jsonProperties[j]
        }
        /* Push the genearted JSON object to resultant array */
        csvToJsonResult.push(jsonObject)
    }
    /* Convert the final array to JSON */
    const json = JSON.stringify(csvToJsonResult);
    console.log(json)
    return json
}

// 清空输出框
function clearFields() {
    outputText.value = ''
}
karshey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSV 转 JSON
liuhao9999的博客
08-23 1970
将逗号分隔值 (CSV) 字符串转换为二维对象数组。字符串的第一行用作标题行。为每一行的值创建一个对象，键从标题行解析。提供的 . 分隔每行中的值。删除第一行（标题行）并将。为每一行创建一个字符串。以使用 . 的默认分隔符。查找第一个换行符 (其分隔为值，使用提供的。
json-to-csv：将JSON转换为CSV转换器
02-03
json到csv 嵌套JSON到CSV转换器。 此python脚本将有效的，预格式化的JSON转换为CSV，可在excel和其他类似应用程序中打开。 该脚本可以处理具有多个对象和数组的嵌套json。 请参阅下面的说明和示例文件，以了解其工作原理。 它也可以处理非相似对象。 但是，更多的对象相似性可以使输出更漂亮。 用Python 2.7编写。 最后测试于Python 3.6.3。 用法 python /path/to/json_to_csv.py node json_in_file_path csv_out_file_path 来源规格 该脚本希望通过包含以下内容的文件来提供json：
csvToJson：将CSV文件转换为JSON
02-02
CSV转JSON 该项目不依赖于其他软件包或库。 目录 描述 使用Node.js将csv文件转换为JSON文件。 输入如下文件： 名字 姓 电子邮件 性别 年龄 压缩 注册 康斯坦丁 兰斯顿 男 96 123 真正 诺拉 理由 女 32 假 例如： first_name;last_name;email;gender;age;zip;registered Constantin;Langsdon;[email protected];Male;96;123;true Norah;Raison;[email protected];Female;32;;false 将产生： [ { " first_name " : " Constantin " , " last_name " : " Langsdon " , " email " : " [email protected] " , " gender " : " Male " , " age " : " 96 " , " zip " : " 123 " , " registered "
JS小知识，如何将 CSV 转换为 JSON 字符串
前端达人
02-02 5936
大家好，今天和大家聊一聊，在前端开发中，我们如何将 CSV 格式的内容转换成 JSON 字符串，这个需求在我们处理数据的业务需求中十分常见，你是如何处理的呢，如果你有更好的方法欢迎在评论区补充。一、使用 csvtojson 第三方库您可以使用csvtojson库在 JavaScript 中快速将 CSV 转换为 JSON 字符串：index.jsimport csvToJson from 'c...
CSV to JSON
最新发布
gitblog_00031的博客
03-15 348
CSV to JSON 转换工具 CSV (Comma Separated Values) 和 JSON (JavaScript Object Notation) 是两种非常常见的数据交换格式。它们都有各自的优点和缺点，但有时我们需要在它们之间进行转换。为此，我们提供了一个简单的在线工具，用于将 CSV 文件转换为 JSON 格式。 功能描述 CSV to JSON 是一个轻量级的在线工具，可以帮...
Kettle CSV文件与json文件转换实例
weixin_50739598的博客
10-07 1025
一、CSV文件转换 CSV是Comma-Separated Values的缩写，即逗号分隔值。CSV文件是用逗号分隔数据字段的文件，因此也被称为逗号分隔值文件，有时会使用字符来替代逗号实现分隔，因此，也被称为字符分隔文件。CSV文件是以纯文本形式存储表格数据（数字和文本），纯文本意味着该文件是一个字符序列。CSV文件可通过Excel打开，也可以通过txt、Notepad++等文本编辑器打开，从而对文件进行查看、编辑等操作。 CSV文件是由任意数目的记录组成，记录之间以某种换行符分隔；每条...
在线CSV转JSON工具
Linux,Java,SpringBoot,Python,Lua略知一点
04-11 1292
在线CSV转JSON工具 在线CSV转JSON工具 CSV To JSON Converter 在线将 CSV 数据转换为 JSON。灵活的选项，允许你编辑转换后的 JSON/XML 文件。 CSV To JSON Converter 在线将 CSV 数据转换为 JSON。灵活的选项，允许你编辑转换后的 JSON/XML 文件。 https://toolgg.com/csv-to-json.html ...
csv转json【在线转换工具】、调整日期格式【python】
&再见萤火虫&的博客
04-17 5478
目录 一，问题背景 二，解决过程 1，csv转json 2，日期格式调整 一，问题背景 做实验时需要对csv格式的源数据进行处理，主要包括转换为json、调整日期格式两个功能，csv原文件内容如下： CountyName,Date,apparentTemperatureMax,apparentTemperatureMin,cloudCover,dewPoint,humidity,precipIntensity,precipIntensityMax,precipProbability,pr
csvTojson
liujie_5201314的博客
11-11 555
csvTojson
CSV to JSON 转换工具
gitblog_00025的博客
03-15 328
CSV to JSON 转换工具 CSV (Comma Separated Values) 和 JSON (JavaScript Object Notation) 是两种非常常见的数据交换格式。它们都有各自的优点和缺点，但有时我们需要在它们之间进行转换。为此，我们提供了一个简单的在线工具，用于将 CSV 文件转换为 JSON 格式。 功能描述 CSV to JSON 是一个轻量级的在线工具，可以帮...
python print如何将从csv文件读出的“\n“输出为换行
u012329294的专栏
11-16 972
python print如何将从csv文件读出的\n输出为换行
json2csv-cpp:C ++中的JSON到CSV转换器
05-04
json2csv-cpp 在C ++中将### JSON转换为csv转换器。 特征 极快 递归展平浅层或深层嵌套的JSON 动机 无论我如何美化JSON，我的目标受众都可以更直观地找到表格和电子表格中的数据表示形式。 为此笔者阐明了这一点很好。 用法 $ echo basic $ json2csv " test.json " " test.csv " $ echo " download json from web and transform " $ wget http://www.treasury.gov/jsonfiles/data.json > data.json & json2csv data.json data.csv 依存关系 开源JSON读取器/写入器
【csv转json】【json转csv】Papa Parse
09-14
Papa Parse - Powerful CSV parser that converts CSV to JSON and JSON to CSV. Supports web workers and streaming large files. Gracefully handles malformed input. http://www.jiangwangui.cn/x3/jquery-papa-parse
CSV转XML/JSON工具
09-22
目前只支持CSV转换到XM或者JSON，如果需要其他的转换工具可以找我，或者等我后续在补上，输出输入格式可选，支持选择定位的文件，和保存的文件夹
json转csv的exe软件
12-24
本身mysql workbench说的是支持导入表格的数据有json和csv，但是我导入json 的时候会出错，所以我就找了这个软件转成csv文件，然后就可以了，共享出来给大家
json-editor:一个将JSON模式转换为表单的jquery插件
05-10
为什么用json-edit 快速和容易使用。 RTL支持：只需将样式（direction：rtl）添加到占位符元素。 它仅取决于jQuery。 可以在拖曳模式下使用：属性网格（当前实现）/常规形式（路线图）。 易于自定义CSS。 支持...
自己实现一个简单的JSON解析器
07-18
本着探究 JSON 原理的目的，我将会在这DEMO中实现了一个简单的JSON解析器。由于 JSON 本身比较简单，解析起来也并不复杂。所以如果大家感兴趣的话，在看完本DEMO后，不妨自己动手实现一个 JSON 解析器。
Json字符串和模型互相转换Demo.zip
01-27
之前为了封装URLNavigator路由框架,当要传递控制器的参数的时候,需要用到传json字符串,然后接收的时候再把json字符串转换成对象.所以今天做了这个protocol协议,只要让模型的类遵守协议,然后啥都不用写,就能直接调用...
fastjson 对象转换成json字符串
03-28
可以使用 fastjson 库的 toJSONString 方法将一个对象转换成 json 字符串，具体步骤如下： 1. 导入 fastjson 库 ```java import com.alibaba.fastjson.JSON; ``` 2. 创建一个对象 ```java Person person = new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

karshey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值