如何使用jquery表单输入字段转换为嵌套的JSON结构 [英] How to convert form input fields to nested json structure using jquery
问题描述
我想下面的输入字段转换成嵌套的JSON文件结构,下面每在我的html页面,我试过一对夫妇的方式,但无法获得。在这里,我通过angularjs NG重复获得这些投入。请帮我,我怎么能实现。先谢谢了。
<表ID =文本的方法=邮报行动=ENCTYPE =的multipart / form-data的>
<输入类型=隐藏值=/图像/ Image1.niiNAME =图片网址>
<输入类型=隐藏值=3D0NAME =3D>
<输入类型=隐藏值=sliceX0NAME =sliceX>
<输入类型=隐藏值=sliceY0NAME =sliceY>
<输入类型=隐藏值=sliceZ0NAME =sliceZ> <输入类型=隐藏值=/图像/ Image2.niiNAME =图片网址>
<输入类型=隐藏值=3D1NAME =3D1>
<输入类型=隐藏值=sliceX1NAME =sliceX>
<输入类型=隐藏值=sliceY1NAME =sliceY>
<输入类型=隐藏值=sliceZ1NAME =sliceZ>< /表及GT;
由于我得到它在一个正常的JSON结构:
<$p$p><$c$c>[{\"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\"}]但我需要如下所示:
[
{名:图片网址,值:/图片/ Image1.nii部分:
{名:3D,值:3D0},
{名:sliceX,值:sliceX0},
{名:sliceY,值:sliceY0},
{名:sliceZ,值:sliceZ0},
]}, {名:图片网址,值:/图片/ Image2.nii部分:
{名:3D,值:3D1},
{名:sliceX,值:sliceX1},
{名:sliceY,值:sliceY1},
{名:sliceZ,值:sliceZ1}
]}
]
如何使用jquery表单输入字段转换为嵌套JSON结构
您应使用一个辅助的库如 lodash 以做这样的数据操作。
下面是一个转换我与lodash所做的:
//将数据分割成每5个元素的大块
变种块= _.chunk(数据,5);//对于每块创建具有零件所需的对象
VAR所需= _.map(块,功能(C){
VAR形象= C [0];
image.parts = _.rest(C);
返回形象;
});的console.log(需要);
下面是一个工作 Plunker
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. Here I am getting these inputs through 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:
[{"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
You should use a helper library like lodash to do such data manipulation.
Here is a conversion which I did with 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);
Here is a working Plunker
这篇关于如何使用jquery表单输入字段转换为嵌套的JSON结构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!