Как сгенерировать JSON динамически с динамическими свойствами?

Question

У меня есть динамически созданная таблица HTML, которая должна быть заполнена пользователем. Пользователь может создать новый РАЗДЕЛ (столько, сколько он хочет), и он может создать LABELS и его ПЕРЕВОДЫ. Столько, сколько он хочет. Ниже приводится часть HTML-код:

<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> 

Чем я хотел бы создать JSON из значений, заполненных пользователем. Объект должен быть, как этот:

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

Сформировать выше JSON Я использую следующий 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); 

Но JSON не создается, как и ожидалось.

Есть 2 вопроса здесь:

1. языки [раздел] = {LBL: транс} является перекрывая последний. Поэтому в конце процесса мы имеем только последний один элемент.
2. Переменная переменной lbl не распознается как переменная, а как строка.

выглядит так:

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

Я попытался предложения от этого post и этого one. Но они не используют динамически созданный property. Я пытался использовать push, но он не работает с объектами. Я мог бы создать строку JSON, а затем до parse. Но я хотел бы знать, как решить эту проблему по-другому. Любая идея в том, как генерировать этот JSON динамически?

UPDATE:

После поста Джеймса, это код, который работает:

$("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); 

Answer 1

Итак, есть две ошибки, одна вы перезаписать значение lang[section] с новым объектом каждый раз , Два, этот новый объект содержит ключ со строковым значением «lbl», а не значение, содержащееся в переменной lbl.
Чтобы исправить, заменить:

lang[section]={lbl:trans}; 

С:

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