将输入值形成为 JSON

Posted 2023-05-09

【中文标题】将输入值形成为 JSON

【英文标题】：Form input values to JSON

【发布时间】：2019-06-17 05:48:34

【问题描述】：

问题

我正在尝试将表单输入转换为 json 对象，但很难实现这一点，下面是我拥有的 html 和我想要获取的 JSON 的 sn-p。

    "2019-01-23": [
        
            id: 1,
            period: 'am'
        ,
        
            id: 2,
            period: 'pm'
        
    ]

<select name="dates[2019-01-23][0][id]">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select name="dates[2019-01-23][0][period]">
    <option selected>am</option>
    <option>pm</option>
</select>

<select name="dates[2019-01-23][1][id]">
    <option value="1">1</option>
    <option value="2" selected>2</option>
    <option value="3">3</option>
</select>
<select name="dates[2019-01-23][1][period]">
    <option>am</option>
    <option selected>pm</option>
</select>

我的尝试

var inputs = $(':input').serializeArray();
var json = [];
$.each(inputs, function(key, input) 
    var names = input.name.split(/\[(.*?)\]/);
    var data = [];

    data[names[1]] = [];
    data[names[1]][names[3]] =  id: null, period: null ;
    if(names[5] == 'id') 
        data[names[1]][names[3]].id = input.value;
    
    if(names[5] == 'period') 
        data[names[1]][names[3]].period = input.value;
    

    json.push(data);
);

但这并不能完全实现我所追求的（同一日期的多个），而且我现在有点迷失了，我相信一定有一种方法可以更轻松地做到这一点。

【参考方案1】：

首先，match 比 split 更适合您的情况。

此外，由于json 是对象字面量，它应该用空对象（）初始化，而不是数组。

push 不太适合您的情况。最好使用直接赋值。

所以代码可能如下所示：

var inputs = $(':input').serializeArray();
var json = ;
$.each(inputs, function(key, input) 
    var keys = input.name.match(/([^\[\]]+)/g).slice(1);
    var date = keys[0], i = keys[1], id = keys[2];
    if (!json[date]) json[date] = [];
    if (!json[date][i]) json[date][i] = ;
    json[date][i][id] = input.value;
);
console.log(JSON.stringify(json));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select name="dates[2019-01-23][0][id]">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select name="dates[2019-01-23][0][period]">
    <option selected>am</option>
    <option>pm</option>
</select>

<select name="dates[2019-01-23][1][id]">
    <option value="1">1</option>
    <option value="2" selected>2</option>
    <option value="3">3</option>
</select>
<select name="dates[2019-01-23][1][period]">
    <option>am</option>
    <option selected>pm</option>
</select>

【讨论】：

这几乎可以工作，但是它在方括号内返回日期，例如[2019-01-23] 而不是 2019-01-23。有什么想法吗？

@Karl 抱歉，我忘记了带有g 标志的match() 返回完整匹配项，而不是捕获的组。固定。