[英]How to convert form input fields to nested json structure using jquery
I would like to convert the below input fields into nested json file structure as per below in my html page, I've tried in a couple of ways, but unable to get. 我想将下面的输入字段转换为嵌套的json文件结构,如下面的html页所示,我已经尝试了几种方法,但是无法获取。 Here I am getting these inputs through angularjs ng-repeat. 在这里,我通过angularjs ng-repeat获取这些输入。 Please help me that how can i implement. 请帮助我,我该如何实施。 Thanks in advance. 提前致谢。
<form id="text" method="post" action="" enctype="multipart/form-data">
<input type="hidden" value="/images/Image1.nii" name="imageurl">
<input type="hidden" value="3d0" name="3d" >
<input type="hidden" value="sliceX0" name="sliceX">
<input type="hidden" value="sliceY0" name="sliceY">
<input type="hidden" value="sliceZ0" name="sliceZ">
<input type="hidden" value="/images/Image2.nii" name="imageurl">
<input type="hidden" value="3d1" name="3d1" >
<input type="hidden" value="sliceX1" name="sliceX">
<input type="hidden" value="sliceY1" name="sliceY">
<input type="hidden" value="sliceZ1" name="sliceZ">
</form>
As I am getting it in a normal json structure: 当我以普通的json结构获取它时:
[{"name":"imageurl","value":"/images/Image1.nii"},{"name":"3d","value":"3d0"},{"name":"sliceX","value":"sliceX0"},{"name":"sliceY","value":"sliceY0"},{"name":"sliceZ","value":"sliceZ0"},{"name":"imageurl","value":"/images/Image2.nii"},{"name":"3d","value":"3d1"},{"name":"sliceX","value":"sliceX1"},{"name":"sliceY","value":"sliceY1"},{"name":"sliceZ","value":"sliceZ1"}]
but I need like below: 但我需要如下所示:
[
{"name":"imageurl","value":"/images/Image1.nii", parts: [
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
]},
{"name":"imageurl","value":"/images/Image2.nii", parts: [
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]}
]
How to convert form input fields to nested json structure using jquery 如何使用jQuery将表单输入字段转换为嵌套的json结构
You should use a helper library like lodash to do such data manipulation. 您应该使用类似于lodash的帮助程序库来进行此类数据操作。
Here is a conversion which I did with lodash: 这是我对lodash所做的转换:
// split the data into chunks of 5 elements each
var chunks = _.chunk(data, 5);
// for every chunk create the desired object with the parts
var desired = _.map(chunks, function(c) {
var image = c[0];
image.parts = _.rest(c);
return image;
});
console.log(desired);
You should wrap each image group in its own container. 您应该将每个图像组包装在其自己的容器中。 But if you must keep your current structure: 但是,如果您必须保留当前结构:
var el = document.querySelectorAll('#text [type="hidden"]');
var arr = [];
var obj = {};
var push = false;
for(var i = 0; i < el.length; i ++){
if(el[i].value.indexOf('images') > -1){
if(push){
arr.push(obj);
obj = {};
};
obj.name = 'imageurl';
obj.value = el[i].value;
push = true;
}
obj.parts = obj.parts || [];
obj.parts.push({
name: el[i].name,
value: el[i].value
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.