Задать вопрос
kirashoo42
@kirashoo42

Как сделать поиск по сайту js?

Всем привет, хотел попробовать сделать поиск по сайту но чот не получается...
Вот код

(контент массив с информацией )
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",
	},
]


(вывод в 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
})


(а тут я пытаюсь сделать поиск по имени {name})
CATALOG.forEach(({name}) => {
	btn.addEventListener("click", () => {
		if(search.value == {name}) {
			console.log("Нашел")
		}
		else {
			console.log("Не нашел")
		}
	})
})

Еще я знаю что {name} это массив и его нужно преобразовать в троку но все ровно нет результата
  • Вопрос задан
  • 108 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
smilingcheater
@smilingcheater
search.value == {name}
с какой целью вы строку name превратили в объект {name}? Подозреваю что вы не до конца понимаете деструктуризацию и вас запутала запись CATALOG.forEach(({name}).
Если делаете простое в лоб сравнение - то и сравнивайте строки
search.value == name
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы