如何使用jquery表单输入字段转换为嵌套的JSON结构 [英] How to convert form input fields to nested json structure using jquery

问题描述

我想下面的输入字段转换成嵌套的JSON文件结构，下面每在我的html页面，我试过一对夫妇的方式，但无法获得。在这里，我通过angularjs NG重复获得这些投入。请帮我，我怎么能实现。先谢谢了。

 ＆LT;表ID =文本的方法=邮报行动=ENCTYPE =的multipart / form-data的＆GT;
    ＆LT;输入类型=隐藏值=/图像/ Image1.niiNAME =图片网址＆GT;
    ＆LT;输入类型=隐藏值=3D0NAME =3D＆GT;
    ＆LT;输入类型=隐藏值=sliceX0NAME =sliceX＆GT;
    ＆LT;输入类型=隐藏值=sliceY0NAME =sliceY＆GT;
    ＆LT;输入类型=隐藏值=sliceZ0NAME =sliceZ＆GT;    ＆LT;输入类型=隐藏值=/图像/ Image2.niiNAME =图片网址＆GT;
    ＆LT;输入类型=隐藏值=3D1NAME =3D1＆GT;
    ＆LT;输入类型=隐藏值=sliceX1NAME =sliceX＆GT;
    ＆LT;输入类型=隐藏值=sliceY1NAME =sliceY＆GT;
    ＆LT;输入类型=隐藏值=sliceZ1NAME =sliceZ＆GT;＆LT; /表及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屋！