如何获取对象内角色的ID

Question

我有一系列电影，每部电影里面都有另一个角色数组。当我点击一个角色时，我想显示有关他们的各种信息（姓名、年龄等），为此，我需要每个角色的

id

。

const PopularBooks = [
  {
    id: 1,
    title: "Harry Potter",
    characters: [
      {
        id: 10,
        name: "Harry Potter",
      },
      {
        id: 11,
        name: "Hermione",
      },
      {
        id: 12,
        name: "Ron",
      },
    ],
  {
    id: 2,
    title: "Lord of the Rings",
    characters: [
      {
        id: 13,
        name: "Frodo",
      },
      {
        id: 14,
        name: "Legolas",
      },
      {
        id: 15,
        name: "Gandalf",
      },
    ],
  },
];

在书本主页面内，我将每个字符显示在图像中，当您单击该字符时，它会将您发送到另一个网页，其中参数是字符 ID。

        <% book.characters.forEach(character => { %>
          <div class="portrait">
            <a href="/character/<%= character.id %>">
              <img
                src="/images/characters/book-c-<%= character.id %>.png"
              />
            </a>
            <p><%= character.name %></p>
          </div>
          <% }); %>

我已将路由器函数中的参数设置为工作正常的 characterId 函数，但是当我尝试再次对数据数组进行排序以将

characterId

函数与实际字符

id

进行比较时，字符 id 返回为未定义我留下了这个错误：

Cannot read properties of undefined (reading 'find')

const data = require("../data");

router.get("/character/:character", function (req, res, next) {
  const characterId = parseInt(req.params.character);
  const character = data.PopularBooks.characters.find(
    (characters) => characters.id === characterId
  );
  console.log(characterId);
  console.log(character);
  res.render("character", { character });
});

我需要这些信息来为每个独特的角色设置一个页面。我做错了什么导致了这个错误，我该如何修复它？

Answer 1

问题源于您如何访问PopularBooks 中的角色。由于每本书都有其字符，而PopularBooks 是一个书籍数组，因此您必须搜索书籍以通过characterId 找到正确的字符。您当前的方法直接使用 data.PopularBooks.characters 将不起作用，因为字符属于个别书籍，而不是PopularBooks。

 const data = require("../data");

router.get("/character/:character", function (req, res, next) {
  const characterId = parseInt(req.params.character);
  
  let foundCharacter = null;
  for (const book of data.PopularBooks) {
    foundCharacter = book.characters.find(character => character.id === characterId);
    if (foundCharacter) {
      break; 
    }
  }
  
  console.log(characterId);
  console.log(foundCharacter);
  
  res.render("character", { character: foundCharacter });
});