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

Question

我正在尝试创建一个带有标签和输入的表单，我有一个关联数组，其标签在“键”中，值在数组对象值中。

我想创建一个具有 2 列 (col-6) 和 (col-6) 的引导水平表单，但很遗憾我无法做到。

这是一个示例数组：

用户数组：{ “id”：“15”， "first_name": "abc", “姓氏”：“xyz”， "地址": "地址", “邮政编码”：“111” }

我想通过 jQuery append() 方法创建如下引导布局。

需要输出

<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 块。

然后第二个 map() 放入我们的 col-md-6/12 类。我本可以将这 2 个结合起来，但认为将它们分开会更清晰。

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