循环数组中的对象以创建元素

时间:2018-12-04 16:06:46

标签: javascript

我正在创建流行的javascript框架之间的比较,并且需要为从api返回的每个对象创建一个HTML元素。

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

为简单起见,我只有一个对象数组(为便于阅读,对它进行了简化)。

我有一个遍历此数组的函数,现在它只是将框架的名称打印到控制台。如果我想为循环中的每个项目创建此HTML元素(只是一张引导卡),那么最好的方法是什么?

frameworks.forEach(fw => {
    console.log(fw);
  });

只是一个非常简单的forEach函数。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

我正在尝试在普通JS中执行此操作,否则我将只使用React。这似乎有点麻烦。最好的方法是使用createElement()函数将其作为模板进行支撑吗?

3 个答案:

答案 0 :(得分:0)

对于普通javascript:

<div m-home class="m-grid__item m-grid__item--fluid m-wrapper"> </div>

答案 1 :(得分:0)

如果您不必添加任何事件侦听器,建议您使用insertAdjacentHTML()

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

frameworks.forEach( framework => 
  document.body.insertAdjacentHTML("beforeend", 
  `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${framework.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`))

答案 2 :(得分:0)

我建议您使用reduce而不是forEach
准备HTML作为字符串,然后更新父元素的innerHTML。 这将比一张一张地添加卡片要快得多。

请参见下面的代码段

const frameworks = [{
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

document.querySelector('.content')
  .innerHTML = frameworks.reduce((a, fw) => a +=
  `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${fw.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`, ''
);
.content {
  display: flex;
  flex-flow: row wrap;
}

.card {
  margin: .5rem;
  padding: 1rem;
  background: #fec
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content"></div>

希望有帮助。