Create a json object by parsing a dynamic form

Question

I have a form that has been generated by parsing a json object which is similar to

<h3>header<h3>
<label>dynamicName</label>
<input type ="text" name="dynamicName"               value="dynamicValue"/>
<h3>header2<h3>
<label>dynamicName2</label>
<input type ="text" name="dynamicName2" value="dynamicValue2"/>
<label>dynamicName3</label>

<input type ="text" name="dynamicName3"   value="dynamicValue3"/>

Now the form has to be converted back to json where header will be object and labels will be key value pair.... The problem I'm facing is I'm unable to group the fields during form creation as each field is checked for its type and based on that it's been append to a div.so while Converting back its plane key value pair.Tried many ways Bt nothing works. Any help would be greatly appreciated.. I tried

Obj=[] ;
$(#json).find('h3'). each(function) 
{
 var hd=$(#json).find('h3'). text() ;
 $(#json).find('label').each(function) 
{
  var labelN=$(#json).find('label '). text();
  var labelV=$(' # '+labelN). val();
  Items={
  Items[labelN] =[labelV] ;
 } 
  Object . hd. push(Items);

And all the elements are being added to each header creating a mess.

The output I need is in format

 Obj jsn={
"header1":
 {
 " dynamiclabel1":"dynamicValue1"
 }, 
 {
"header2":{
 "dynamicName2":"dynamicValue2", 
 "dynamicName 3":"dynamicValue 3"
  }
  }........   
 The function used to create a dynamic form is

 function addAttributeInput(obj) {
for (var o in obj) {
     var vo=.val(obj[o]) ;
    if (typeof obj[o] == "object") {
    ('#json'). append(<h3>o</h3>
        addAttributeInput(obj[o]);
      } else {
          ('#json'). append('<label >o</label>'<input type=" text" name='+o+' value ='+vo') ;
      }
  }

}

addAttributeInput(Obj) ;

Did my answer helped ?! – Mehdi Bouzidi Sep 26 '17 at 17:41 — Mehdi Bouzidi, Sep 26 '17 at 17:41

Aaron Eveleth · Answer 1 · 2017-09-25T20:12:42.807

0

First, I'd suggest putting each object, as it is represented in HTML, in a containing div. This isn't necessary, but can help you avoid unwanted issues.

Like this:

<div class="container-div">
  <h3>header</h3>
  <label>dynamicName</label>
  <input type="text" value="dynamicValue"/>
</div>

From there you can do something like this:

var objects_array = {};
$('.container-div').each(function(){
  var object_key = $(this).children('h3').html();
  var field_key = $(this).children('label').html();
  var field_value = $(this).children('input').val();

  var object = {};
  object[field_key] = field_value;
  objects_array[object_key] = object;
});

edited Sep 25 '17 at 20:12

answered Sep 25 '17 at 19:57

Aaron Eveleth

117
7

Sorry, what's the issue? I tested and there is an issue with this code. I will update in a second. Sorry about that. – Aaron Eveleth Sep 25 '17 at 20:01
Thanks for the suggestion but the problem is during creation of my form I'm unable to group them either as form or div – manju Sep 25 '17 at 20:02
The form is created by checking each element in a object its type and based on that either header or label is been append to a div – manju Sep 25 '17 at 20:06
Are you saying you can't restructure your form? If so, why not? – Aaron Eveleth Sep 25 '17 at 20:08
Also, part of the issue I found is your `h3` has to starting tags instead of a starting and closing tag. There is still some issue in the code I provided. Cleaning that up now. – Aaron Eveleth Sep 25 '17 at 20:08
Sorry I am posting this question on my way back to home from my mobile... So please ignore the typos.. – manju Sep 25 '17 at 20:10
No my point is I'm unable to group elements during the form creation process from a json... – manju Sep 25 '17 at 20:12
I'm still not understanding what you mean. If you add the containing div I suggested, and use the jQuery code I provided, then it should work for you. I just tested. If you are unable to restructure your code like I suggested, you need another way of keeping them "grouped". – Aaron Eveleth Sep 25 '17 at 20:14
In this case the div which u have assigned is hard-coded.. Bt in our case the div is also to be added dynamically and there arises grouping problem – manju Sep 25 '17 at 20:19
You can dynamically add a div? I'm assuming you loop through each object and create the h3, label, and input for each. Is this correct? If so, then in that loop, insert the h3, label, and input into the div. Is this not how you are generating your HTML? – Aaron Eveleth Sep 25 '17 at 20:20
No, it's like var(o in Obj){ – manju Sep 25 '17 at 20:39
Where Obj is a json object n if type of O is object I create a header n call that function again else create a label and input type – manju Sep 25 '17 at 20:40
I tried creating a div during header creation but the div classes immediately n all data are appended to the main div instead – manju Sep 25 '17 at 20:42
So loop through each object like you do. In the first loop create the div and the header. Inside that div, but below the header, loop through each field for the given object(from the first loop), this should only be one field based on what you've provided. Use the field key to create the label, and use the field value to create the input field. – Aaron Eveleth Sep 25 '17 at 21:27
What backend language are you using? I might be able to give you a better example. – Aaron Eveleth Sep 25 '17 at 21:28
Java, but converting the in the front end should be easier – manju Sep 26 '17 at 04:06

score 0 · Accepted Answer · answered Sep 26 '17 at 12:58

WRAP EACH `h3` `label` `input`

The first idea I had is to wrap each of this 3 elements with a div in such a way that I can manipulate them easily, & After making some researches I found this question: Wrap every 3 divs in a div that inspire me to write this code:

var divs = $("body").children();
for (var i = 0; i < divs.length; i += 3) {
  divs.slice(i, i + 3).wrapAll("<div class='wrapped'></div>");
}

Creating the JSON

So after wrapping those elements with the wrapped class, I searched for a long time the way that let me to code a String as a JSON & it was very complicated, beacause we have to respect some syntax.

So I looked for another idea, I though about coding directly the JSON using variables, I found out this question:creating json object with variables that lead me to write this code:

var arr={};
$(".wrapped").each(function(){ 

var lastH=$(this).find("h3:last");
var sub_arr={};

sub_arr[lastH.find("input").attr("name")] = lastH.find("input").val();
arr[$(this).find("h3:first").text()] = sub_arr;

});
console.log(arr);

Finally here is a code snippet that demonstrate my solution:

var divs = $("body").children();
for (var i = 0; i < divs.length; i += 3) {
  divs.slice(i, i + 3).wrapAll("<div class='wrapped'></div>");
}

var arr={};
$(".wrapped").each(function(){ 

var lastH=$(this).find("h3:last");
var sub_arr={};

sub_arr[lastH.find("input").attr("name")] = lastH.find("input").val();
arr[$(this).find("h3:first").text()] = sub_arr;

});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>header<h3>
<label>dynamicName</label>
<input type ="text" name="dynamicName"               value="dynamicValue"/>
<h3>header2<h3>
<label>dynamicName2</label>
<input type ="text" name="dynamicName2" value="dynamicValue2"/>

Hope it helps.

Even though I had to do many modifications to fit my requirement but this deserves to be accepted answer — manju, Sep 26 '17 at 18:17

Create a json object by parsing a dynamic form

2 Answers2

WRAP EACH h3 label input

Creating the JSON

WRAP EACH `h3` `label` `input`