Question

我有一个HTML dinamically创建的表应该由用户填写。用户可以创建新的 SECTION （尽可能多），他可以创建 LABELS 及其 TRANSLATIONS 。他想要多少。以下是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。

这里有两个问题：

lang [section] = {lbl：trans} 会覆盖最后一个。所以在过程结束时我们只有最后一个元素。
lbl 变量未被识别为变量，而是字符串。

看起来像这样：

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

我已尝试过post和one的建议。但他们不使用动态创建的property。我尝试过使用push但它不适用于对象。我可以创建一个JSON字符串，然后创建parse它。但我想知道如何以另一种方式解决这个问题。有关如何动态生成此JSON的任何想法吗？

更新

在詹姆斯的帖子之后，这是有效的代码：

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

如何使用动态属性动态生成JSON？

1 个答案: