Search function for a value in an array of objects

Question

I have tried to create a function which searches for the title in an array of book-objects. For some reason my code doesn't work, I have tried going through each step logically and in my mind it should be working.

let book = {
  title: "The 48 Laws of Power",
  author: "Robert Greene",
  numOfPages: 452,
  publisher: "Penguin Books",
  rating: "4.5 stars"
}

let book2 = {
  title: "How to Catch a Turkey",
  author: "Adam Wallace",
  numOfPages: 40,
  publisher: "",
  rating: "5 stars"
}

let book3 = {
  title: "Glitter Every Day: 365 Quotes from Women I Love",
  author: "Andy Cohen",
  numOfPages: 384,
  publisher: "Henry Holt and Co.",
  rating: "3 stars"
}

let bookArr = [book, book2, book3];
let searchBtn = document.getElementById('search-button');
let found = false;

let bookSearch = function() {
  found = false;
  let input = document.getElementById('book-search');
  for (i = 0; i < bookArr.length; i++) {
    if (input.value.toLowerCase == bookArr[i].title.toLowerCase) {
      found = true;
      break;
    }

  }
  if (found) {
    console.log(bookArr[i]);
  } else {
    console.log("The book was not found.");
  }
}
searchBtn.addEventListener('click', bookSearch);

<input type="text" id="book-search" placeholder="Search books...">
<button id="search-button">Search</button>
<script src="object.js"></script>

And lastly I'm new to this forum and also new to programming so I apologize if this is the wrong way of asking questions but I would really appreciate some criticism on my code and what I should do better. Thank you!

Have you tried using your browser's dev tools to debug the bookSearch function? — h0r53
– h0r53, Commented Nov 5, 2021 at 16:13
toLowerCase is a function, you should invoke it using (): toLowerCase() — Dario
– Dario, Commented Nov 5, 2021 at 16:14

Balastrong · Accepted Answer · 2021-11-05 16:18:12Z

You can use Array.find() and it's as easy as:

var book = bookArr.find(book => book.title.toLowerCase() == input.value.toLowerCase())

Working Demo

let book = {
  title: "The 48 Laws of Power",
  author: "Robert Greene",
  numOfPages: 452,
  publisher: "Penguin Books",
  rating: "4.5 stars"
}

let book2 = {
  title: "How to Catch a Turkey",
  author: "Adam Wallace",
  numOfPages: 40,
  publisher: "",
  rating: "5 stars"
}

let book3 = {
  title: "Glitter Every Day: 365 Quotes from Women I Love",
  author: "Andy Cohen",
  numOfPages: 384,
  publisher: "Henry Holt and Co.",
  rating: "3 stars"
}

let bookArr = [book, book2, book3];
let searchBtn = document.getElementById('search-button');
let found = false;

let bookSearch = function() {
  let input = document.getElementById('book-search');
  var book = bookArr.find(book => book.title.toLowerCase() == input.value.toLowerCase())

  if (book) {
    console.log(book);
  } else {
    console.log("The book was not found.");
  }
}
searchBtn.addEventListener('click', bookSearch);

<input type="text" id="book-search" placeholder="Search books...">
<button id="search-button">Search</button>
<script src="object.js"></script>

Invizi · Accepted Answer · 2021-11-05 17:55:10Z

2

If you want only the first match, use Array.find().

books.find(book => book.title == 'mysearch');

If you want an array of matches use Array.filter().

books.filter(book => book.title == 'mysearch');

If you are using Typescript, then you can add type safety and make the search function easier to use.

function search<Type, Key extends keyof Type>(arr: Type[], prop: Key, match: Type[Key]){
    // For a single item
    return arr.find(item => item[prop] == match);

    // For an array of matches
    return arr.filter(item => item[prop] == match);
}

Then we make an interface for a book and we can easily search it while having auto-complete.

interface Book {
    title: string;
    author: string;
    numOfPages: number;
    publisher: string
    rating: string;
}

search(books, "title", "Harry Potter")

Here's a TS playground to try the code yourself. Link

edited Nov 5, 2021 at 17:55

answered Nov 5, 2021 at 16:24

Invizi

1,2881 gold badge8 silver badges7 bronze badges

1 Comment

Invizi Over a year ago

@Icepickle Thanks. It's hard to see mistakes when writing on a phone.

Collectives™ on Stack Overflow

Search function for a value in an array of objects

2 Answers 2

Working Demo

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Working Demo

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related