如何使用js/vue处理formData数据，转化为json数据格式

前端传到后端的数据格式为formData，在浏览器控制台查看到的数据为：

platform: pcweb
formData[runtime]: 0.067
formData[status]: Y
formData[code]: 200
formData[msg]: 
formData[data][0][a]: 6984
formData[data][0][b]: 1399
formData[data][0][c]: 你做饭好吃吗？
formData[data][0][d]: 0
formData[data][0][e]: 0
formData[data][0][f]: 1
formData[data][0][g][0][url]: ""
formData[data][1][a]: 6984
formData[data][1][b]: 1399
formData[data][1][c]: 你做饭好吃吗？
formData[data][1][d]: 0
formData[data][1][e]: 0
formData[data][1][f]: 1
formData[data][1][g][0][url]: ""
...

有的时候需要看传到后端的数据是否有问题，因此想自己写一个小工具，能够把formData格式转换为json格式，查了很多formData转json的例子，都是在请求之前使用formData对象进行转换。前端使用vue+element-ui来进行开发
尝试1：

const formData = []
// 截取字符串
const array = str.split("\n")
// 遍历
arrayStr.forEach(function (item,index) {
    eval(item)
})

把数组元素当做是赋值语句，使用evel()函数去执行代码，结果因为文本信息里的下标，例如：formData[runtime]，它会把runtime识别成一个变量，因此无法继续往下执行。

尝试2：
有了尝试1的思路，就想着把大括号内的数组下标加上引号，但是依然提示有异常；

尝试3：
后端有现成的php的方法，但是每次都要复制粘贴，然后打印，很不友好，仿照着用js的方式去写，可是自己前端的技术比较菜且js里没有php &$这样的用法，因此也是卡在了快结束的阶段。

因此，小伙伴们有没有什么想法和思路能够让上面的文本信息转化为：

{
    "platform": "pcweb",
    "runtime": "",
    "formData":{
        "data": [
            {
                "a":1,
                "b":2
                ...
            },
            {
                "a":1,
                "b":2
                ...
            }
    }
}

她来听我的演唱会

Laravel 9.x 译者 600 声望

不会写代码的厨子不是好程序员！

0 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

Rache1

658 声望

最佳答案

找到了个比较完美的方法，利用 lodash 的 _.set

const result = `platform: pcwe 
formData[runtime]: 0.067
formData[status]: Y
formData[code]: 200
formData[msg]: 
formData[data][0][a]: 6984
formData[data][0][b]: 1399
formData[data][0][c]: 你做饭好吃吗？
formData[data][0][d]: 0
formData[data][0][e]: 0
formData[data][0][f]: 1
formData[data][0][g][0][url]: ""
formData[data][1][a]: 6984
formData[data][1][b]: 1399
formData[data][1][c]: 你做饭好吃吗？
formData[data][1][d]: 0
formData[data][1][e]: 0
formData[data][1][f]: 1
formData[data][1][g][0][url]: ""`.split('\n')
  .reduce(
    (r, i) => _.set(r, ...i.split(': ', 2).reduce(
        (k, v) => ([k.replace(/\[(\D+?)]/g, '.$1'), v]),
      ),
    ), {})

旧的内容 👇

效果不是很完美，数组会被显示成对象，下面那个方法来自 javascript - Convert HTML form-data to nested JSON - Stack Overflow

var object = Object.fromEntries(`platform: pcwe 
formData[runtime]: 0.067
formData[status]: Y
formData[code]: 200
formData[msg]: 
formData[data][0][a]: 6984
formData[data][0][b]: 1399
formData[data][0][c]: 你做饭好吃吗？
formData[data][0][d]: 0
formData[data][0][e]: 0
formData[data][0][f]: 1
formData[data][0][g][0][url]: ""
formData[data][1][a]: 6984
formData[data][1][b]: 1399
formData[data][1][c]: 你做饭好吃吗？
formData[data][1][d]: 0
formData[data][1][e]: 0
formData[data][1][f]: 1
formData[data][1][g][0][url]: ""`.split("\n").map(i=>i.split(': ',2)).map(([name,value])=>([name.replace(/\[(\w+?)]/g,'.$1'),value])))

// 来自 https://stackoverflow.com/questions/34656665/convert-html-form-data-to-nested-json
const result = Object.keys(object).reduce(function (r, a) {
        a.replace('[', '.[').split('.').reduce(function (o, b, i, kk) {
            function isArrayIndex(s) { return /^\[\d+\]$/.test(s); }                
            if (isArrayIndex(b)) {
                b = b.match(/\d+/) - 1;
            }
            o[b] = o[b] || (isArrayIndex(kk[i + 1]) ? [] : {});
            if (i + 1 === kk.length) {
                o[b] = object[a];
            }
            return o[b];
        }, r);
        return r;
    }, {});


console.log(result)

2年前评论

她来听我的演唱会（楼主）

感谢老哥，老哥稳！

讨论数量: 3

Rache1

658 声望

找到了个比较完美的方法，利用 lodash 的 _.set

const result = `platform: pcwe 
formData[runtime]: 0.067
formData[status]: Y
formData[code]: 200
formData[msg]: 
formData[data][0][a]: 6984
formData[data][0][b]: 1399
formData[data][0][c]: 你做饭好吃吗？
formData[data][0][d]: 0
formData[data][0][e]: 0
formData[data][0][f]: 1
formData[data][0][g][0][url]: ""
formData[data][1][a]: 6984
formData[data][1][b]: 1399
formData[data][1][c]: 你做饭好吃吗？
formData[data][1][d]: 0
formData[data][1][e]: 0
formData[data][1][f]: 1
formData[data][1][g][0][url]: ""`.split('\n')
  .reduce(
    (r, i) => _.set(r, ...i.split(': ', 2).reduce(
        (k, v) => ([k.replace(/\[(\D+?)]/g, '.$1'), v]),
      ),
    ), {})

旧的内容 👇

效果不是很完美，数组会被显示成对象，下面那个方法来自 javascript - Convert HTML form-data to nested JSON - Stack Overflow

var object = Object.fromEntries(`platform: pcwe 
formData[runtime]: 0.067
formData[status]: Y
formData[code]: 200
formData[msg]: 
formData[data][0][a]: 6984
formData[data][0][b]: 1399
formData[data][0][c]: 你做饭好吃吗？
formData[data][0][d]: 0
formData[data][0][e]: 0
formData[data][0][f]: 1
formData[data][0][g][0][url]: ""
formData[data][1][a]: 6984
formData[data][1][b]: 1399
formData[data][1][c]: 你做饭好吃吗？
formData[data][1][d]: 0
formData[data][1][e]: 0
formData[data][1][f]: 1
formData[data][1][g][0][url]: ""`.split("\n").map(i=>i.split(': ',2)).map(([name,value])=>([name.replace(/\[(\w+?)]/g,'.$1'),value])))

// 来自 https://stackoverflow.com/questions/34656665/convert-html-form-data-to-nested-json
const result = Object.keys(object).reduce(function (r, a) {
        a.replace('[', '.[').split('.').reduce(function (o, b, i, kk) {
            function isArrayIndex(s) { return /^\[\d+\]$/.test(s); }                
            if (isArrayIndex(b)) {
                b = b.match(/\d+/) - 1;
            }
            o[b] = o[b] || (isArrayIndex(kk[i + 1]) ? [] : {});
            if (i + 1 === kk.length) {
                o[b] = object[a];
            }
            return o[b];
        }, r);
        return r;
    }, {});


console.log(result)

2年前评论

她来听我的演唱会（楼主）

感谢老哥，老哥稳！

风吹过有夏天的味道

课程读者 336 声望 / php小菜鸟 @ myself

不用转吧，直接调用序列化方法就好了

2年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

如何使用js/vue处理formData数据，转化为json数据格式

旧的内容 👇

旧的内容 👇

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

如何使用js/vue处理formData数据，转化为json数据格式

旧的内容 👇

旧的内容 👇

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录