通过解析动态表单

Question

我有一个通过解析类似于

的json对象生成的表单

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

现在必须将表单转换回json，其中标题将是对象，标签将是键值对....我面临的问题是我无法在表单创建过程中将字段分组为每个字段检查它的类型，并根据它被附加到div.so而 转换回它的平面键值对。多种方式Bt无效。任何帮助将不胜感激.. 我试过了

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

所有元素都被添加到每个标题中，造成混乱。

我需要的输出格式为

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

Answer 1

首先，我建议将每个对象（在HTML中表示）放在包含div中。这不是必需的，但可以帮助您避免不必要的问题。

像这样：

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

从那里你可以做这样的事情：

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;
});

Answer 2

WRAP EACH h3 label input

我的第一个想法是用div包裹这三个元素中的每一个，以便我可以轻松地操纵它们。在进行了一些研究后，我发现了这个问题：Wrap every 3 divs in a div激励我编写这段代码：

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

创建JSON

因此，在使用wrapped类包装这些元素之后，我搜索了很长时间，让我将String编码为JSON＆amp;这是非常复杂的，因为我们必须尊重一些syntax。

所以我寻找另一个想法，我虽然使用变量直接编码 JSON ，但我发现了这个问题：creating json object with variables   这导致我写这段代码：

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

最后，这是一个演示我的解决方案的代码片段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。