How do I get multiple value input to json object with jquery or javascript

Question

I have input tag html like this :

<form id="info">
    <input id="A" name="A" type="hidden" nodetye="parent" value="A">
    <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
    <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
    <input id="B" name="B" type="hidden" nodetye="parent" value="B">
    <input id="B1" name="B1" type="text" nodetye="child" value="B1">
    <input id="B2" name="B2" type="text" nodetye="child" value="B2">
<form>

I pass value in jquery like this :

function writeJSONfile() {
    var obj = {};
    $("form#info :input").each(function(){
        obj[this.id] = $(this).val();
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}

Result :

{"A":"A","A1":"a1val","A2":"a2val","B":"B","B1":"b1val","B2":"b2val"}

But My Expect Result is :

{"A":{"A1":"a1val","A2":"a2val"},"B":{"B1":"b1val","B2":"b2val"}}

You can read JSON with json editor online. Thanks in Advance

Answer 1

The problem you are facing occurs, because you haven't written code that distinguishes values like 'A' , 'B' from 'A1' , 'B1' etc. All you need, in order to make the code work is:

• a variable that references the object which the property should be added to &
• a simple if check that will direct the flow accordingly.

Snippet:

 /* ----- JavaScript ----- */ function writeJSONfile() { var /* Create an object. */ obj = {}, /* Create a variable that references the current object (default → obj). */ ref = obj; /* Iterate over every input. */ $("form#info :input").each(function() { /* Cache the id of the input. */ var id = this.id; /* Check whether the nodetype attribute is set to 'parent'. */ if (this.getAttribute("nodetype") == "parent") { /* Set a new object to the property and set ref to refer to it. */ ref = obj[id] = {}; } else { /* Set the value of the input to the referred object. */ ref[id] = $(this).val(); } }); /* Stringify the object and return it. */ return JSON.stringify(obj); } /* Create and log the result. */ console.log(writeJSONfile());

 <!----- HTML -----> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"/> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"/> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"/> <input id="B" name="B" type="hidden" nodetype="parent" value="B"/> <input id="B1" name="B1" type="text" nodetype="child" value="b1val"/> <input id="B2" name="B2" type="text" nodetype="child" value="b2val"/> </form>

Answer 2

Made a few changes on the managment of classes and ids . A quick an easy function to solve your problem.

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

 function writeJSONfile() { var obj = {}; $(".main").each(function() { var mainId = this.id; obj[this.id] = {}; $("input").each(function() { if ($(this).hasClass(mainId)) { obj[mainId][this.id] = $(this).val();; } }) }); var json = JSON.stringify(obj); alert("check" + json); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B"> <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1"> <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2"> <form> <button onclick="writeJSONfile()">Run</button>

Answer 3

Try This :

   function writeNodeJSON() {
       var obj = {};
       var ref = obj;
       $("form#info :input").each(function () {
           var id = this.id;
           if ($(this).attr("nodetype")==="parent") {
               obj[id] = {};
               ref = obj[id];
           } else
               ref[id] = $(this).val();
       });
       console.log(JSON.stringify(obj));
    //    alert(JSON.stringify(obj));
    //    return JSON.stringify(obj);
    }}

I check by attribute name "nodetype"

Answer 4

You can find all the input with nodetype parent and update the obj object with its id as key and {} as value. Then iterate through all input element with nodetype as child and add all the id as key and value as input box value in the object.

 function writeJSONfile() { var obj = {}; $('form#info :input[nodetype=parent]').each(function(){ obj[this.id] = {}; }) $("form#info :input[nodetype=child]").each(function(){ if(!(this.id[0] in obj)) obj[this.id[0]] = {}; obj[this.id[0]][this.id] = $(this).val(); }); var json = JSON.stringify(obj); console.log(json); } writeJSONfile();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" name="B" type="hidden" nodetype="parent" value="B"> <input id="B1" name="B1" type="text" nodetype="child" value="B1"> <input id="B2" name="B2" type="text" nodetype="child" value="B2"> <form>

Answer 5

 function writeJSONfile() { var obj = {}; $(".main").each(function() { var mainId = this.id; obj[mainId] = {}; $("."+mainId).each(function() { obj[mainId][this.id] = $(this).val(); }) }); console.log(JSON.stringify(obj)); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B"> <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1"> <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2"> <form> <input type="button" onclick="writeJSONfile()" value="Run">

Answer 6

Write like this may works:

 function writeJSONfile() { debugger; var obj = {}; var children = {}; $("form#info :input").each(function(){ var parent = this; if(parent.getAttribute("nodetype")=="parent"){ obj[parent.id] = {}; var nexts = $(parent).nextAll(); for(let i=0;i<nexts.length;i++){ if(nexts[i].getAttribute("nodetype")!="child"){ break; }else{ obj[parent.id][nexts[i].id] = $(nexts[i]).val(); } } } }); var json = JSON.stringify(obj); alert("check"+json); } writeJSONfile();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" name="B" type="hidden" nodetype="parent" value="B"> <input id="B1" name="B1" type="text" nodetype="child" value="B1"> <input id="B2" name="B2" type="text" nodetype="child" value="B2"> <form>