Question 236077 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I get the ID of a character inside an object

I have an array of movies and inside each movie is another array for characters. When I click on a character I’d like to show various bits of information about them (name, age, etc.) and in order to do that, I need the id of each character.

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",
      },
    ],
  },
];

Inside the main book page I have each character displayed inside an image and when you click on the character it sends you to another web page where the params is the characters 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>
          <% }); %>

I have set the params in my router function to a characterId function which works fine, however when I try sorting through my data array again to compare the characterId function to the characters actual id, the character id is returning as undefined and I’m left with this error: 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 });
});

I need this information to set up a page for each unique character. What am I doing wrong to cause this error and how can I fix it?

Tags:

2

Answers


  1. 0

    The issue arises from how you access characters in PopularBooks. Since each book has its characters and PopularBooks is a book array, you must search books to find the right character by characterId. Your current method, directly using data.PopularBooks.characters, will not work as characters belong to individual books, not 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 });
});
    Login or Signup to reply.
  2. 0

    You are trying to access the characters array of a specific book, but you’re currently searching for the character within the entire PopularBooks array. You need to first find the correct book by its ID and then search for the character:

    ...
//find the book containing the character
const bookContainingCharacter = data.PopularBooks.find((book) =>
  book.characters.some((character) => character.id === characterId)
);

if (!bookContainingCharacter) {
  //if ID is not found in any book
  return res.status(404).send("Character not found");
}

//find the specific character within the book
const character = bookContainingCharacter.characters.find(
  (char) => char.id === characterId
);
....
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search