Hi everybody, I’m getting crazy, I’ve been working for 2 days on this and I still can’t fix it!
Here’s my code:
// Click handler for search button
const captureSearchValue = () => {
const searchInput = document.getElementById(“search-bar”).value;
return searchInput.trim().toLowerCase();
};
// Filter books based on search input
const filterBooks = (searchString, bookList) => {
const filteredBooks = books.filter((book) => {
const flattenedValues = flattenObjectValuesIntoArray([book]);
return flattenedValues.some((value) =>
value.toString().toLowerCase().includes(searchString.toLowerCase())
);
});
return filteredBooks;
};
// Empty the book list container, iterate over list of filtered books, return list of books formatted as HTML using the function in helper.js
const structureBooksAsHtml = (filteredBooks) => {
return filteredBooks.map((book) => structureBookAsHtml(book));
};
// Handler triggered when a user clickers the “Search” button. Chains previously defined functions together to filter books based on the search value, formats the books as HTML and renders them to the DOM
const searchBtnClickHandler = (books) => {
const searchValue = captureSearchValue();
const filteredBooks = filterBooks(searchValue, books);
const formattedBooks = structureBooksAsHtml(filteredBooks);
renderBooksToDom(formattedBooks);
};
// Grab search button from the DOM
const searchBtn = document.getElementById(“search-btn”);
// Attach an event listener to the search button
searchBtn.addEventListener(“click”, () => searchBtnClickHandler(books));
and these are the helper functions:
// Flatten object keys into an array so that we search the entire object by the input value
const flattenObjectValuesIntoArray = (arrOfObjs) => {
let flattenedObj;
const flattenedObjsArr = ;
for (let obj = 0; obj < arrOfObjs.length; obj++) {
const objValues = Object.values(arrOfObjs[obj]);
flattenedObj = […objValues.flat()]
flattenedObjsArr.push(flattenedObj)
}
return flattenedObjsArr;
};
// Structure filtered books as HTML and return
const structureBookAsHtml = (book) => {
const bookDiv = document.createElement(“div”);
bookDiv.setAttribute(‘class’, ‘bookDiv’);
const bookTitle = document.createElement(“h2”);
bookTitle.innerHTML = book.title;
bookTitle.setAttribute(‘class’, ‘bookTitle’);
const bookAuthor = document.createElement(“h3”);
bookAuthor.innerHTML = book.author;
const bookTags = document.createElement(“p”);
bookTags.innerHTML = book.tags.join(", ");
bookDiv.append(bookTitle, bookAuthor, bookTags);
return bookDiv;
};
const renderBooksToDom = (elements) => {
const bookListContainer = document.querySelector(“#bookList”);
bookListContainer.innerHTML = “”;
bookListContainer.append(…elements);
};
Almost everything is correct, since it still gives me an error saying “Given a search for 'fiction', expected the bookTitle div to have 6 child elements.”
I really don’t know how to get unstucked, I’m getting crazy and frustrated!