通过解析动态表单创建json对象

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

包裹每个 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 的方法，这非常复杂，因为我们必须尊重一些@ 987654322@。

所以我寻找另一个想法，我虽然关于使用变量直接编码 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);

---

最后是一段代码 sn-p 来演示我的解决方案：

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

希望对你有帮助。

Answer 2

首先，我建议将每个对象（以 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;
});