漫威Api - JavaScript:如何在一个模态中显示漫画信息？
漫威Api - JavaScript:如何在一个模态中显示漫画信息？
提问于 2021-04-25 10:12:35
我正在使用漫威API，我想在点击一张漫画卡之后，以一个模式显示漫画信息，但问题是：
-the模式显示所有20个漫画描述，而不是一个。
当点击一张卡片时，-or模式显示了对所有20幅漫画的相同描述。
我想这和漫画的id有关，但我不知道如何得到ID，也不知道如何将它与模式连接起来。当我试图得到它时，我要么得到所有的ID，要么只得到第一个漫画的id。
请求的结果如下所示，我不知道如何将一张卡连接到它的相关Id：
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 90122, digitalId: 0, title: "Symbiote Spider-Man: King in Black (2020) #5", issueNumber: 5, variantDescription: "", …}
1: {id: 80471, digitalId: 54905, title: "Marvel (2020) #3", issueNumber: 3, variantDescription: "", …}
2: {id: 65123, digitalId: 0, title: "Edge Of Venomverse (Trade Paperback)", issueNumber: 0, variantDescription: "", …}
3: {id: 78327, digitalId: 0, title: "Rocket Raccoon and Groot: Tall Tails (Trade Paperback)"..}
codepen上的html和javascript (在JS中标记了我被困的区域)：https://codepen.io/lillae/pen/poRGLvg?editors=1010
在这段代码中，我使用了forEach()方法，但是它以1模式显示了所有的漫画信息，我不知道如何让它识别被点击的漫画。
我会很高兴得到一些帮助，因为我在这方面被困了一段时间。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-25 10:34:09
首先，因为有了这段代码，您才能获得所有的ids。
const marvel = data2.data.results; //20 array of 20 comics
let output = '';
marvel.forEach((comic) => {
output += `
<div class="col-lg-4" id="modalPic">
<img ${comic.thumbnail.path}/portrait_incredible.jpg" alt=""
class="modal-pic">
</div>
<div class="col-lg-8" id="infoModal">
<h5 class="modal-title" id="exampleModalLabel">${comic.title} </h5>
<p>${comic.description}</p>
</div>
`;
});
modalInfo.innerHTML = output;
} catch (err) {
console.error(`${err.message}`);
renderError(`${err.message}`);
}
}要在模式中显示特定的Id细节，您应该首先获得一个id。构建一个button，当用户从漫画列表中选择时，您将获得该特定漫画的id。这样您就可以从api的响应中搜索它。获得id示例22331后，在javascript .find()中使用构建的数组方法。
像这样使用:-
res // response from api (must be array of object)
res.find(comic => {
return comic.id === userSelected.id;
})此代码块将返回一个数组，该数组只包含与所选用户的id相同的漫画。
然后将数组.map()到您的模式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67252179
复制相关文章
相似问题
腾讯云开发者
