convert json structure to nested json structure in jquery angularjs

Question

Can I know that how can i convert my current json file to nested json structure as per below, I've tried in a couple of ways(How to convert form input fields to nested json structure using jquery), but I'm not getting it, please help me where I am doing wrong, so that we can iterate through imageurl value on my view page using ng-repeat. If I use the below, it is not giving as per my desired structure.

html:

<form id="controlid" method="post" action="" enctype="multipart/form-data" >
    <input type="hidden" value="3d{{$index}}" name="3d" >
    <input type="hidden" value="sliceX{{$index}}" name="sliceX">
    <input type="hidden" value="sliceY{{$index}}" name="sliceY" >
    <input type="hidden" value="sliceZ{{$index}}" name="sliceZ">
    <input type="button" id="submitButton" value="Save">                            
</form> 

jquery:

$("#submitButton").on('click', function(e) {
    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('/tests/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
        });
    }

    var fileDataToSave = $(obj).serializeArray();
    var jsoncontent = JSON.stringify( fileDataToSave );
    var $downloadAnchor = $("<a/>", {
        href: 'data:text/json;charset=UTF-8,' + jsoncontent,
        download: "info.json"
    });
    $downloadAnchor.css({"position": "absolute", "left": "970px", "top":"258px"});
    $downloadAnchor.text("Click here to download JSON");
    $("form").append($downloadAnchor);
    e.preventDefault();
    return false;
});

current json:

[{"name":"imageurl","value":"/tests/images/Image1.nii"},{"name":"3d","value":"3d0"},{"name":"sliceX","value":"sliceX0"},{"name":"sliceY","value":"sliceY0"},{"name":"sliceZ","value":"sliceZ0"},{"name":"imageurl","value":"/tests/images/Image2.nii"},{"name":"3d","value":"3d1"},{"name":"sliceX","value":"sliceX1"},{"name":"sliceY","value":"sliceY1"},{"name":"sliceZ","value":"sliceZ1"}]`

`desired json structure:` [
    {"name":"imageurl","value":"/tests/Image1.nii", parts: [
        {"name":"3d","value":"3d0"},
        {"name":"sliceX","value":"sliceX0"},
        {"name":"sliceY","value":"sliceY0"},    
        {"name":"sliceZ","value":"sliceZ0"},
    ]},

    {"name":"imageurl","value":"/tests/Image2.nii", parts: [
        {"name":"3d","value":"3d1"},
        {"name":"sliceX","value":"sliceX1"},
        {"name":"sliceY","value":"sliceY1"},
        {"name":"sliceZ","value":"sliceZ1"}
    ]}
]

possible duplicate of How to convert form input fields to nested json structure using jquery — GreyRoofPigeon
– GreyRoofPigeon, Commented Sep 15, 2015 at 10:28
Hi LinkinTED, Thanks for your reply, I've tried that, but I'm not getting like that above desired output json structure. Please help me regarding this. Thanks in advance. — Dhana
– Dhana, Commented Sep 15, 2015 at 10:32

teamnorge · Accepted Answer · 2015-10-09 12:35:53Z

1

Pure Javascript solution.

var json; // your current json object
var newJson = [];

for (var i = 0; i < json.length; i++) {
  var node;
  if (json[i].name === "imageurl") {
     node = json[i];
     var parts = [];
     for (var j = i + 1; j < json.length; j++) {
       if (json[j].name !== "imageurl") {
         parts.push(json[j]);
       } else {
         i = j - 1;
         break;
       }
     }
     node.parts = parts;
     newJson.push(node);
  }
}

we simply loop through all elements, find those with name === "imageurl" and add rest of the elements as parts until find new element with name === "imageurl".

http://plnkr.co/edit/Y7UtcwHwwo8dfP8ONk9S?p=preview

edited Oct 9, 2015 at 12:35

answered Sep 15, 2015 at 10:46

teamnorge

7845 silver badges10 bronze badges

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

1 Comment

Dhana Over a year ago

Hi teamnorge, Thanks for your reply. Yes, It worked for me. Thanks a lot !!.

Collectives™ on Stack Overflow

convert json structure to nested json structure in jquery angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related