How to generate JSON dynamically with dynamic properties?

Question

I have a HTML dinamically created table that should be filled by the user. The user can creates a new SECTION (as many as he want) and he can creates LABELS and its TRANSLATIONS. As many as he wants. Following is part of the html code:

<table>

    <tr class = "section">
        <td class = "sectionName">section1</td>;
        <td><input type="submit" value="Update"></td>
    </tr>
    <tr class="lbl_trans_Wrap">
        <td class="lbl">lbl_11</td>
        <td class="trans"><input type="text" value="trans_11"></td>
    </tr>


    <tr class = "section">
        <td class = "sectionName">section2</td>;
        <td><input type="submit" value="Update"></td>
    </tr>
    <tr class="lbl_trans_Wrap">
        <td class="lbl">lbl_21</td>
        <td class="trans"><input type="text" value="trans_21"></td>
    </tr>
    <tr class="lbl_trans_Wrap">
        <td class="lbl">lbl_22</td>
        <td class="trans"><input type="text" value="trans_22"></td>
    </tr>

    ... 

</table>

Than I would like to create a JSON from the values filled by the user. The object should be like this one:

var lang =
{
     section1:
            {
              lbl_11:"trans_11"                         
            },
     section2:
            {
              lbl_21:"trans_21",
              lbl_22:"trans_22"                          
            } 
};

To generate the above JSON I am using the following javascript:

var lang ={};
var lbl="";
var trans="";  
var section="";     

$( "tr" ).each(function() {//Pass trough each line in the table

       if($(this).hasClass( "section" )){                 
           section = $(this).children("td.sectionName").html();//Grab all sections                   
           //console.log(section);
       }
       if($(this).hasClass( "lbl_trans_Wrap" )){
            lbl = $(this).children("td.lbl").html();//Grab all labels
            //console.log(lbl);
            trans = $(this).children("td.trans").children("input.txt_translate").val();//Grab all translation
            //console.log(trans);
            lang[section]={lbl:trans};                    
       }

 });

//console.log(lang);

But the JSON is not being created as expected.

There are 2 issues here:

The lang[section]={lbl:trans} is overriding the last one. So at the end of the process we have only the last one element.
The lbl variable is not being recognized as variable but as a string.

Looks like this:

var lang =
{
     section1:
            {
              lbl:"trans_11"                         
            },
     section2:
            {
              lbl:"trans_21"                         
            } 
};

I've tried suggestions from this post and this one. But they do not use dynamically created property. I've tried to use push but it not works to objects. I could create a JSON string and then to parse it. But I would like to know how to solve this issue in another way. Any idea in how to generate this JSON dynamically ?

UPDATE:

After James's post, this is the code that works:

$( "tr" ).each(function() {//Pass trough each line in the table

       if($(this).hasClass( "section" )){                 
           section = $(this).children("td.sectionName").children("h1").html();//Grab all sections                   
           //console.log(section);
       }
       if($(this).hasClass( "lbl_trans_Wrap" )){
            lbl = $(this).children("td.lbl").html();//Grab all labels
            //console.log(lbl);
            trans = $(this).children("td.trans").children("input.txt_translate").val();//Grab all translation
            //console.log(trans);

            if (!lang[section]) {
              lang[section] = {};
            }
            lang[section][lbl] = trans;
       }

 });

//console.log(lang);

Is there a reason you're not using actual form fields? You could then pretty easily use something like [serializeArray](http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) — Will, Nov 25 '15 at 22:10
Hi friend, 2 reasons: 1- Sometimes we must make choices. In this case I have no choice. I am working in a project that was not written by my hand. So If I decide to rewrite from the scratch would be a long way. This is why I choose to continue the code. 2- I prefer to learn what I don't know. Now I know how to create a JSON completely dynamic, thanks to James. — IgorAlves, Nov 26 '15 at 13:55

score 1 · Accepted Answer · answered Nov 25 '15 at 22:17

So there are two bugs, one you are overwriting the value of lang[section] with a new object each time. Two, that new object contains a key with the string value "lbl", not the value contained in the lbl variable.
To fix, replace:

lang[section]={lbl:trans};

With:

if (!lang[section]) {
  lang[section] = {};
}
lang[section][lbl] = trans;

How to generate JSON dynamically with dynamic properties?

1 Answers1