javascript - 从 javascript 数组生成动态 html 卡片

Question

我想在 HTML 中显示一些卡片元素。我想从 javascript 数组中获取卡片元素的变量。(例如标题等。)。 卡片元素编号也将取决于 Javascript 数组大小。我已经查看了其他问题，例如生成动态表，但由于我有一个很长的自定义 html 代码块，所以它不起作用。

这是我正在 build 的网站。我已经通过 HTTP get 请求从 api 端点获取了变量，但无法按我的意愿显示。我已经查看了许多类似的问题，但找不到我正在寻找的答案。

这是通过 HTTP get 请求获取变量的脚本

<script>
const request = new XMLHttpRequest();

request.open('GET', 'api/seminars', true);
request.onload = function() {
  // Begin accessing JSON data here
  const data = JSON.parse(this.response);

  if (request.status >= 200 && request.status < 400) {
    data.forEach(resultArray => {
      document.getElementById('output').innerHTML = resultArray.name;
      document.getElementById('description').innerHTML =
        resultArray.description;
      document.getElementById('date').innerHTML = resultArray.date;
    });
  } else {
    console.log('error');
  }
};

request.send();
</script>

HTML 代码:

<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data- target="#collapseOne" aria-expanded="true"
                    aria-controls="collapseOne">

                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">

                <h5 id="name"></h5>
                <p id="description"></p>
                <p id="description"></p>
                ...
            </div>
        </div>
    </div>
</div>

我从这里继续 html 代码不相关..

如果我的数组中有 3 个对象，我想创建 3 个不同的卡片并显示 name、description.. 属性。但是我的代码只创建了一张卡片并显示了最后一个对象的属性。

Answer 1

您的代码永远不会真正根据您的 API 调用“创建”元素 - 它只是通过更新由其 ID 引用的固定元素的 innerHTML 来更新(即覆盖)现有的 dom 元素。

如果我对您的代码的解释是正确的，那么您应该只会在 API 结果中看到最后一项。还有一些其他奇怪的事情正在发生，比如我猜是拼写错误的重复 ID

要解决此问题，请为您的 API 返回的每个项目创建一个新的 div.card-body 并将其附加到您的容器中

const apiResult = [{
  title: "title1",
  description: "desc1",
  output: "out1"
}, {
  title: "title2",
  description: "desc2",
  output: "out2"
}, {
  title: "title3",
  description: "desc3",
  output: "out3"
}];


const container = document.getElementById('accordion');

apiResult.forEach((result, idx) => {
  // Create card element
  const card = document.createElement('div');
  card.classList = 'card-body';

  // Construct card content
  const content = `
    <div class="card">
    <div class="card-header" id="heading-${idx}">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-${idx}" aria-expanded="true" aria-controls="collapse-${idx}">

                </button>
      </h5>
    </div>

    <div id="collapse-${idx}" class="collapse show" aria-labelledby="heading-${idx}" data-parent="#accordion">
      <div class="card-body">

        <h5>${result.title}</h5>
        <p>${result.description}</p>
        <p>${result.output}</p>
        ...
      </div>
    </div>
  </div>
  `;

  // Append newyly created card element to the container
  container.innerHTML += content;
})

.card {
padding: 1rem;
border: 1px solid black;
margin: 1rem;
}

<div id="accordion">
  
</div>

注意:

虽然这可行，但它的可扩展性不是很好。有一些很棒的模板库，它们具有更高级的插值功能，如果您必须在许多地方执行类似的操作(并维护它)，您可以考虑这些模板库

jsRender

Underscore Templates

Handlebars

UI 框架，如 Vue , React , Angular wrap templating with binding to data models and handle auto updating the DOM for you to make things like this easier.如果您的网页上有很多动态更新的部分，则值得调查