从 javascript 数组生成动态 html 卡片

Question

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

这是针对我正在构建的网站。我已经通过 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 个不同的卡片和显示名称、描述...属性。但我的代码只创建一张卡片并显示最后一个对象的属性。

Answer 1

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

如果我对您的代码的解释是正确的，那么您应该只会看到 API 结果中的最后一项。还有一些其他奇怪的东西，比如重复的 ID，我猜是错别字

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

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>

笔记：

虽然这有效，但它的可扩展性不是很强。有一些很棒的模板库具有更高级的插值功能，如果您必须在许多地方做这样的事情（并维护它），您可以考虑

渲染器

下划线模板

车把

Vue、React、Angular等 UI 框架通过绑定到数据模型来包装模板，并为您处理自动更新 DOM 以使此类事情变得更容易。值得研究一下，如果您的网页上有很多动态更新的部分