将输入值转换为JSON

时间:2019-01-23 15:30:20

标签: javascript jquery forms serialization

问题

我正在尝试将表单输入转换为json对象,但是很难实现这一点,下面是我拥有的HTML和我要获取的JSON的代码段。

{
    "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 个答案:

答案 0 :(得分:1)

首先,matchsplit更适合您的情况。

此外,由于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>