Marvel Api - JavaScript：如何以模式显示漫画信息？

Question

我正在使用 Marvel API，我想在点击漫画卡后以模式显示漫画信息，但问题是：

-模态显示所有 20 个漫画描述而不是一个。

-或模态在点击卡片时显示所有 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 个模式显示所有漫画信息，我不知道如何让它识别它所点击的漫画。

我会很高兴能得到一些帮助，因为我在这方面被困了一段时间。

Answer 1

首先，由于这段代码，你得到了所有的 id。

    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}`);
  }
}

要在 modal 中显示特定的 Id 详细信息，您应该首先只获取一个 id。 构建一个button，当用户从漫画列表中选择时，您将获得该特定漫画的 ID。这样您就可以从 api 的响应中搜索它。获取id example22331后，在javascript中使用inbuilt array方法.find()。

这样使用：-

res // response from api (must be array of object)

res.find(comic => {
     return comic.id === userSelected.id;
})

此代码块将返回一个数组，该数组仅包含与所选用户具有相同 id 的漫画。

然后将.map() 数组添加到您的模态框。