在对话框中一次显示多个对象

Question

我完全陷入困境。我试图在弹出的对话框中单独显示对象，我找不到任何有关如何执行此操作的信息。我可以一次显示它们，但这不是我想要做的。

$.each(needs, function(i, v) {
  console.info(v);
  var brand = v.brand;
  console.info(brand);
  var model = v.model;
  var growerID = v.growerID;
  if (v.portalID === null) {
    var unmatched = {
      brand: v.brand,
      model: v.model,
      growerID: v.growerID
    }
    newmatch.push(unmatched);
    console.info(newmatch);
  } else {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
  <form>
    <div class="fleft">
      <div>
        <img src="/app/public/css/images/logo.png">
      </div>
      <div class="form-group brand ui-corner-all">
        <label for="owner">Brand</label>
        <div class="card-type ui-corner-all " id="brand"></div>
      </div>
      <div class="form-group ui-corner-all">
        <label for="model">Model</label>
        <div class="model ui-corner-all " id="trxio_model"></div>
      </div>
      <div class="form-group growerId">
        <label for="growerId">Grower ID</label>
        <div class="card-type ui-corner-all " id="growerId"></div>
      </div>
      <div class="form-group vendor ui-corner-all ">
        <label for="owner">Default Vendor</label>
        <div class="card-type ui-corner-all " id="vendor"></div>
      </div>
      <button type="submit" class="btn btn-lg">Update Product Info</button>
    </div>
  </form>
</div>

任何帮助将不胜感激。感谢。

Answer 1

因为您只提供了部分代码并没有真正起作用，所以我写了一个小例子如何迭代汽车集合以及如何将它们渲染到HTML容器中。希望这会引导您找到解决方案：

＆＃13;

＆＃13;

var cars = [
  {
    name: "VW",
    year: 1988,
  },
  {
    name: "Honda",
    year: 1999,
  },
  {
    name: "BMW",
    year: 2005,
  }
]

const container = document.querySelector('#container')

const toRender = cars.map(car => `<div class="car"><span class="name">${car.name}</span> <span class="year">${car.year}</span></div>`)

container.innerHTML = toRender.join('')

＆＃13;

.container {
  padding: 10;
  background: #f0f0f0;
}

.car {
  margin: 10px 0; 
}

.name {
  display: inline-block;
  padding: 5px;
  color: #ff0000;
  min-width: 100px;
}

.year {
  color: blue;
}

＆＃13;

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;