提问人：Jelmer 提问时间：2/19/2023 最后编辑：Jelmer 更新时间：2/19/2023 访问量：35
从分组的 API 中显示数据的干净方法？
Clean way to show data from an API grouped?
问：
我正在使用一个 API，它为我提供了 70 个项目。从这些项目中，我需要在网站上显示标题、图像和标语。我设法在网站上获取了数据，但现在它显示的数据如下：
- 标题
- 图像
- 标语
这意味着现在我看到 70 个标题，然后是 70 张图片，然后是 70 个标语。当然，我希望每个项目都显示这一点，所以一个标题，一张图片，一个标语。然后，每个项目都应重复此操作。
我的代码：
function fetchProjects(url) {
fetch(url)
.then(response => {
return response.json();
})
.then(data => {
appendData(data.data);
})
.catch(error => {
console.log(error);
});
}
function appendData(data) {
for (let i = 0; i < data.length; i++) {
let h3 = document.createElement('h3');
h3.innerHTML = data[i].project.title;
document.getElementById('project__header').appendChild(h3);
let img = new Image();
img.src = data[i].project.header_image;
document.getElementById('project__image').appendChild(img);
let p = document.createElement('p');
p.innerHTML = data[i].project.tagline;
document.getElementById('project__tagline').appendChild(p);
}
}
fetchProjects('api_url');
我尝试重新格式化我的代码，但没有用。我也尝试过谷歌搜索这个，但我没有得到任何可以帮助我的结果，所以我可能没有使用正确的关键字。我很抱歉。
谁能指出一种可以在纯 Javascript 和 HTML 中实现此目的的干净方法？谢谢！
编辑：当然，我不想制作 70 个唯一的 ID 并像这样解决它，我知道这是可能的，但这绝对不是我认为的干净解决方案
答：
0赞
VaiTon
2/19/2023
#1
在 for 循环中，您将项目附加到同一元素，因此，如果您有：
<div id="project__header"></div>
<div id="project__image"></div>
<div id="project__tagline"></div>
两个周期后，您将拥有
<div id="project__header">
<h3>...</h3>
<h3>...</h3>
</div>
<div id="project__image">
<img ... />
<img ... />
</div>
<div id="project__tagline">
<p>...</p>
<p>...</p>
</div>
您应该将它们附加到同一个元素中，或者创建一个 div，然后附加整个 div，如下所示：
const div = document.createElement("div");
const h3 = document.createElement('h3');
h3.innerHTML = data[i].project.title;
div.appendChild(h3);
const img = new Image();
img.src = data[i].project.header_image;
div.appendChild(img);
const p = document.createElement('p');
p.innerHTML = data[i].project.tagline;
div.appendChild(p);
document.getElementById("...").appendChild(div);
0赞
Xiao
2/19/2023
#2
将所有标题附加到“project__header”div，将图像附加到“project__image”div，将标语附加到“project__tagline”div。如果我这样做，它可能是
for (let i = 0; i < data.length; i++) {
// create a div container for each project
const dataDiv = document.createElement('div');
const projectTitle = document.createElement('h3');
projectTitle.innerHTML = data[i].project.title;
dataDiv.appendChild(projectTitle);
const img = new Image();
img.src = data[i].project.header_image;
dataDiv.appendChild(img);
const projectTag = document.createElement('p');
projectTag.innerHTML = data[i].project.tagline;
dataDiv.appendChild(projectTag);
// append the dataDiv to the parent container (use your own DOM element) of the projects
parentDiv.append(dataDiv);
}
评论