使用 jQuery 从引导 HTML 生成 JSON 对象答案

【问题标题】：generate JSONobject from bootstrapHTML with jQuery使用 jQuery 从引导 HTML 生成 JSON 对象
【发布时间】：2014-01-29 15:57:33
【问题描述】：

我正在构建一个非常简单的 FormBuilder，用户可以在其中创建文本字段并可以更改它们的顺序。所有的 HTML 都是用 jQuery 动态添加的。

现在我想根据 html 生成一个 JSONobject。

这是一个 HTML 输出示例：

<div id="komp1" class="in">
   <div class="form-group">
      <label for="select" class="col-lg-3 control-label">Lägg till element</label>
      <div class="col-lg-4">
         <select class="form-control" id="komp1select">
            <option>...</option>
            <option>Textfält</option>
         </select>
      </div>
   </div>
   <div class="panel panel-primary">
      <div class="panel-heading">
         <h3 class="panel-title">Textfält#1</h3>
      </div>
      <div class="panel-body">
         <div class="form-group">
            <label for="inputLabel1" class="col-lg-2 control-label">Label</label>
            <div class="col-lg-10"><input type="text" class="form-control" id="inputLabel1"></div>
         </div>
         <div class="form-group">
            <label for="inputValue1" class="col-lg-2 control-label">Value</label>
            <div class="col-lg-10"><input type="text" class="form-control" id="inputValue1" placeholder=""></div>
         </div>
      </div>
   </div>
   <div class="panel panel-primary">
      <div class="panel-heading">
         <h3 class="panel-title">Textfält#2</h3>
      </div>
      <div class="panel-body">
         <div class="form-group">
            <label for="inputLabel2" class="col-lg-2 control-label">Label</label>
            <div class="col-lg-10"><input type="text" class="form-control" id="inputLabel2"></div>
         </div>
         <div class="form-group">
            <label for="inputValue2" class="col-lg-2 control-label">Value</label>
            <div class="col-lg-10"><input type="text" class="form-control" id="inputValue2" placeholder=""></div>
         </div>
      </div>
   </div>
</div>

我想遍历“komp1”div 内的每个面板元素。对于每个面板，我想使用类型输入、ID 和两个输入字段中的值创建一个对象。输出应该类似于：

{"elements":[{"type":"input","id":"value1","label":"","value":""},{"type":"input","id":"value2","label":"","value":""}]}

我如何使用 jQuery 来解决这个问题？

【问题讨论】：

您应该能够使用类似于此处描述的方法：stackoverflow.com/questions/9932469/…。如果您有具体问题，请向我们展示您的代码并描述错误。

标签： jquery json html twitter-bootstrap dynamic

【解决方案1】：

试试这样的。没有测试，只是一个快速的想法：

var inputs = $("#komp1.panel").find( "input" );
var jsonObj = {elements:[]};

for (var i = 0;i<inputs.length;i++){
    jsonObj["elements"].push({type: "input",value: inputs[i].value, id: inputs[i].attr("id")})
}

var json = JSON.stringify(jsonObj);

【讨论】：