[英]Form input values to JSON
The Issue问题
I am trying to convert form inputs to a json object but having difficulty trying to achieve this, below is a snippet of the HTML which I have and the JSON which I'm trying to get.我正在尝试将表单输入转换为 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>
What I've tried我试过的
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);
});
But this doesn't quite achieve what I'm after (multiple of the same date) and I'm getting a bit lost now, I'm sure there must be a way of doing this a lot easier.但这并不能完全实现我所追求的(同一日期的多个),而且我现在有点迷茫,我相信一定有一种方法可以更轻松地做到这一点。
First, match
is more appropriate for your case than split
.首先,
match
比split
更适合您的情况。
Furthermore, since json
is object literal, it should be initialised with empty object ( {}
), not array.此外,由于
json
是对象字面量,它应该用空对象 ( {}
) 初始化,而不是数组。
push
is not quite appropriate for your case. push
不太适合您的情况。 It's better to use direct assignment instead.最好使用直接赋值。
So the code might look like this:所以代码可能是这样的:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.