如何显示某块数据的某个编号。次答案

【问题标题】：How to display a block of data a certain no. of times如何显示某块数据的某个编号。次
【发布时间】：2020-04-10 09:49:29
【问题描述】：

我正在显示一些数据，但目前每个元素只显示一次。我希望这组数据显示一定次数。我将如何更改我的代码，或者我将使用什么来让所有这些数据显示几次？我尝试使用 slice 显示 4 次，但它只显示一次。

fetch('https://api.tvmaze.com/shows?page=1')
  .then((resp) => resp.json())
  .then(function(data) {
    var divElement = document.createElement('div');
    divElement.className = "text";
    data.slice(0, 4).forEach((div, i) => {
      divElement.innerHTML = ` <h2><strong>${data[i].name}</strong></h2>
    <p><strong>${data[i].summary}</strong></p>
    <p><strong>Genre: ${data[i].genres}</strong></p>
    <p><strong>Schedule: ${data[i].schedule.days} at ${data[i].schedule.time}</strong></p>
    <p><strong><a class="link" href=${data[i].url}>More Info</a></strong></p>
    `

      document.body.appendChild(divElement);
    })
  })

fetch('https://api.tvmaze.com/shows?page=1')
  .then((resp) => resp.json())
  .then(function(data) {
    var divElement = document.createElement('div')
    divElement.className = "image";
    data.slice(0, 4).forEach((div, i) => {
      divElement.innerHTML = ` <img src="${data[i].image.medium}"/>
    `

      document.body.appendChild(divElement);
    })
  })

.text:hover {
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.5s;
}

img {
  padding-left: 160px;
  padding-top: 20px;
  margin-left: 330px;
  margin-top: -18px;
  padding-bottom: 30px;
}

.text {
  width: 1100px;
  margin: 25px;
  padding: 40px 10px 10px;
  font-family: 'Roboto', sans-serif;
  background-color: #747474;
  color: white;
}

.link {
  color: rgb(37, 180, 216);
}

.link:visited {
  color: white;
}

.text h2 {
  font-size: 22px;
  margin-top: -20px;
  font-family: 'Roboto', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Alatsi|Dancing+Script|Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="tv.css">
  <script src="tv.js"></script>
</head>

【问题讨论】：

循环显示数据for (var i = 0; i < 3; i++) { code to display data }
slice 不显示 4 次，它只显示数组的前 4 个元素。

标签： javascript foreach fetch slice

【解决方案1】：

问题是您每次都通过.forEach() 循环覆盖divElement.innerHTML，并将相同的divElement 附加到DOM。 appendChild() 不会复制元素；如果它已经在 DOM 中，它将被移动到新位置。

您应该在每次循环中将 HTML 连接到 innerHTML，并将 DIV 附加到最后的正文。

在forEach() 循环中，您可以使用div 引用数组的当前元素，您不需要将其索引为data[i]。

fetch('https://api.tvmaze.com/shows?page=1')
  .then((resp) => resp.json())
  .then(function(data) {
    var divElement = document.createElement('div');
    divElement.className = "text";
    data.slice(0, 4).forEach((div) => {
      divElement.innerHTML += ` <h2><strong>${div.name}</strong></h2>
    <p><strong>${data[i].summary}</strong></p>
    <p><strong>Genre: ${div.genres}</strong></p>
    <p><strong>Schedule: ${div.schedule.days} at ${data[i].schedule.time}</strong></p>
    <p><strong><a class="link" href=${div.url}>More Info</a></strong></p>
    `;
    });
    document.body.appendChild(divElement);
  });

fetch('https://api.tvmaze.com/shows?page=1')
  .then((resp) => resp.json())
  .then(function(data) {
    var divElement = document.createElement('div')
    divElement.className = "image";
    data.slice(0, 4).forEach((div) => {
      divElement.innerHTML += ` <img src="${div.image.medium}"/>
    `
    })
    document.body.appendChild(divElement);
  })

.text:hover {
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.5s;
}

img {
  padding-left: 160px;
  padding-top: 20px;
  margin-left: 330px;
  margin-top: -18px;
  padding-bottom: 30px;
}

.text {
  width: 1100px;
  margin: 25px;
  padding: 40px 10px 10px;
  font-family: 'Roboto', sans-serif;
  background-color: #747474;
  color: white;
}

.link {
  color: rgb(37, 180, 216);
}

.link:visited {
  color: white;
}

.text h2 {
  font-size: 22px;
  margin-top: -20px;
  font-family: 'Roboto', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Alatsi|Dancing+Script|Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="tv.css">
  <script src="tv.js"></script>
</head>

【讨论】：

太好了，成功了！我现在对如何从 API 中检索数据并多次显示有了更好的理解。非常感谢。 @Barmar
唯一的问题是它显示数据数百次，而不是像指定的那样仅显示 3 次。你知道这是为什么吗？ @Barmar
它显示data数组中的每个元素4次，就像你说的那样。因此，如果数组有 100 个项目，您将在输出中得到 400 个项目。
抱歉，我的意思是我想显示已经在屏幕上显示四次的元素，而不是所有数据。 @Barmar
那么你想显示前4个元素，每个元素显示4次，一共16次？然后你可以把slice()放回去。

【解决方案2】：

您只需将 data.forEach（不带切片）放在 for 循环中。就是这样

【讨论】：