如何使用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
                ...
            }
    }
}
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

找到了个比较完美的方法,利用 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)
3周前 评论
她来听我的演唱会 (楼主) 3周前
讨论数量: 3

找到了个比较完美的方法,利用 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)
3周前 评论
她来听我的演唱会 (楼主) 3周前

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

3周前 评论

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