How to convert form input fields to nested json structure using jquery

Question

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

Hi Thanks for your reply, here i need to loop through the imageurl value using ng-repeat to show my images on my view page. — Dhana
– Dhana, Commented Sep 15, 2015 at 7:16
Please find Fiddle at: jsfiddle.net/pw0pqg4g/6 On first iteration: <div ng-repeat="item in newArr> <div data-imgsrc="/images/Image1.nii"> <div id="3d0"></div> <div id="sliceX0"></div> <div id="sliceY0"></div> <div id="sliceZ0"></div> </div> </div> on second iteration: <div ng-repeat="item in newArr> <div data-imgsrc="/images/Image2.nii"> <div id="3d1"></div> <div id="sliceX1"></div> <div id="sliceY1"></div> <div id="sliceZ1"></div> </div> </div> — Dhana
– Dhana, Commented Sep 15, 2015 at 8:36
@Dhana have you tried enctype="application/json" ? check this it might help you in some way link — Hem M
– Hem M, Commented Mar 28, 2017 at 6:23

DanEEStar · Accepted Answer · 2015-09-15 10:35:00Z

1

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

answered Sep 15, 2015 at 10:35

DanEEStar

6,3707 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhana Over a year ago

Hi DanEEStar, Thanks for your reply, It has worked and also got one more solution in Pure Javascript at: stackoverflow.com/questions/32583524/… . Thanks a lot for your help.

DanEEStar Over a year ago

I you are happy with the solution, then make a upvote! :)

pizzarob · Accepted Answer · 2015-09-15 08:05:47Z

0

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
    });
}

answered Sep 15, 2015 at 8:05

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

1 Comment

Dhana Over a year ago

Hi realseanp, I've tried like above, but I'm not getting like the above desired output structure, Please help me. You can check here: stackoverflow.com/questions/32583524/… . Thanks in advance.

Collectives™ on Stack Overflow

How to convert form input fields to nested json structure using jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related