How to do site search js?

Question

css

Hello everyone, I wanted to try to search the site, but it doesn’t work...
Here is the code

(content array with information)

var CATALOG = [
  {
    name: "Harry Potter",
    house: "House: Gryffindor",
    img: "http://hp-api.herokuapp.com/images/harry.jpg",
  },

  {
    name: "Hermione Granger",
    house: "House: Gryffindor",
    img: "http://hp-api.herokuapp.com/images/hermione.jpeg",
  },

  {
    name: "Ron Weasley",
    house: "House: Gryffindor",
    img: "http://hp-api.herokuapp.com/images/ron.jpg",
  },

  {
    name: "Draco Malfoy",
    house: "House: Slytherin",
    img: "http://hp-api.herokuapp.com/images/draco.jpg",
  },

  {
    name: "Cho Chang",
    house: "House: Ravenclaw",
    img: "http://hp-api.herokuapp.com/images/cho.jpg",
  },

  {
    name: "Cedric Diggory",
    house: "House: Hufflepuff",
    img: "http://hp-api.herokuapp.com/images/cedric.png",
  },
]

(output in html)

var htmlCatalog = ""

CATALOG.forEach(({name, house, img}) => {
  htmlCatalog += `
    <div id="box" class="container">
      <div class="text">
        <h3>${name}</h3>
        <h4>${house}</h4>
      </div>
      <img src="${img}">
    </div>	
  `

  var html = `
    <div class="wrapper">
      <div class="block">
        <div class="center">
          <span>search</span>
          <p>search and do not lose</p>
        </div>
        <div class="search1">
          <div class="search2">
            <input placeholder="search" class="search" type="search" id="search">
            <div class="btn" id="btn"></div>
          </div>
        </div>
        <div class="contant">
          ${htmlCatalog}
        </div>
      </div>
    </div>
  `
  contants.innerHTML = html
})

(and here I'm trying to do a search on the name {name})

CATALOG.forEach(({name}) => {
  btn.addEventListener("click", () => {
    if(search.value == {name}) {
      console.log("Нашел")
    }
    else {
      console.log("Не нашел")
    }
  })
})

I also know that {name} is an array and needs to be converted to a string, but there is no result

Answer 1

search.value == {name}
why did you turn the name string into the {name} object? I suspect that you do not fully understand destructuring and you are confused by the entry CATALOG.forEach(({name}).
If you are doing a simple comparison, then compare the strings
search.value == name