我正在显示一些数据，但目前每个元素仅显示一次。我希望将这组数据显示一定次数。我将如何更改代码或将如何使用几次显示所有这些数据？我尝试使用切片将其显示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>您只需要将data.forEach（不包含切片）放在for循环中。就这样