JQueryAppend()需要通过循环关联数组键和值来创建两个Bootstrap列

Question

我正在尝试创建一个带有标签和输入的表单，我有一个关联数组，它的标签在"中；键"；和数组Object值中的值。

我想创建一个有两列(col-6(和(col-6

下面是一个数组示例：

用户阵列：{"id"："15〃；，"first_name"："abc"；，"last_name"："xyz"；，"地址"："地址"；，"邮编"："111〃；}

我想通过jQueryappend((方法创建如下的引导程序布局。

需要输出

<div class="col-12">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-md-4"> ID </label>
<input type="text" value="" class="col-md-8">
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-md-4"> First Name </label>
<input type="text" value="" class="col-md-8">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-md-4"> Last Name </label>
<input type="text" value="" class="col-md-8">
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-md-4"> Address </label>
<input type="text" value="" class="col-md-8">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-md-4"> Zip Code</label>
<input type="text" value="" class="col-md-8">
</div>
</div>
<!-- NOTE THERE IS NO SECOND COLUMNS HERE SINCE ONLY 5 OBJECTS IN ARRAY -->
</div>
</form>
</div>

为了得到这个布局，我只使用下面的jQuery，使用forloop。

脚本

$(document).ready(function() {
const userArray = { "id": "15", "first_name": "abc", "last_name": "xyz", "address": "Address", "zipcode": "111" };
var arrayLength = Object.keys(userArray);
var counter = 0; //initializing this counter just to know which object the loop is.
var columnBlock = ''; //will append this to an element in HTML.
columnBlock += '<form class="horizontal-form">
for (var i = 0; i < arrayLength; i++) {
if(counter == 0 || counter %2 == 0) {
columnBlock += '<div class="row"';
columnBlock += '<div class="col-md-6">;
columnBlock += '<div class="form-group row">; 
columnBlock += '<label class="col-md-4">'+Object.keys(userArray);+'</label>';
columnBlock += '<input class="col-md-8 form-control" value="'+Object.values(userArray)+'">';
columnBlock += '</div>'; //form-group close
columnBlock += '</div>'; //col-6 close
columnBlock += '</div>'; //row close
}
// HERE NO ROWS ONLY COLUMN COL-6, SINCE IT IS THE SECOND COL. IT's NOT WORKING! 
columnBlock += '<div class="col-md-6">;
columnBlock += '<div class="form-group row">; 
columnBlock += '<label class="col-md-4">'+Object.keys(userArray);+'</label>';
columnBlock += '<input class="col-md-8 form-control" value="'+Object.values(userArray)+'">';
columnBlock += '</div>'; //form-group close
columnBlock += '</div>'; //col-6 close

counter = counter + 1;
} // For Close 
$("#info-blok").append(columnBlock); // here appending to HTML div block
}); // JQUERY CLOSE 

HTML

<div class="" id="info-blok"> </div>

它不起作用，有人能指导我如何获得有两列的输出吗？还要注意，最后一行只有一列。

我得到的输出只是一列带行，下一列带"行"；col-6"；。

感谢

Answer 1

我知道你可能不希望有人重写你的逻辑，但在编辑你的代码时，我发现了足够多的错误(或混乱(，我认为这是一个很好的教学时刻。我处理这个问题的方法是暂存数据，首先创建表单元素块，然后将它们分配给col-md-6或col-md-12。它使它更大，更易于阅读。

为了循环遍历userArray，我使用了Object.entries(userArray)，它将{id:123, first_name:"john"}转换为数组[['id','123'],['first_name','john']]——这是可取的，因为我们需要遍历它

在遍历该对象时，我选择使用map()。map()允许我们逐项转换数组数据，这意味着我们可以为每次迭代返回完成的HTML块。

然后在我们的col-md-6/12类中放入第二个map()。我本可以把这两个组合在一起，但我觉得把它们分开更清晰。

$(document).ready(function() {
const userArray = {
"id": "15",
"first_name": "abc",
"last_name": "xyz",
"address": "Address",
"zipcode": "111"
};
let arrayLength = Object.keys(userArray).length;
let counter = 0; //initializing this counter just to know which object the loop is.
let formItems = Object.entries(userArray).map(e => {
return `<div class="form-group row">
<label class="col-md-4">${e[0]}</label>
<input class="col-md-8 form-control" placeholder="${e[0]}" value="${e[1]}"></div>`;
}).map((e, i) => {
let cl = (i === arrayLength - 1 && i % 2 === 0) ? "col-md-12" : "col-md-6 col-sm-6 col-6";
return `<div class="${cl}">${e}</div>`;
}).join('');
formItems = `<form class="horizontal-form"><div class="row">${formItems}</div></form>`;
$("#info-blok").append(formItems); // here appending to HTML div block
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="" id="info-blok"> </div>