How to filter an array in array of objects in Javascript?

Question

 const books = [{
     id: "1",
     title: "Book title",
     areas: ["horror", "mystery"]
   }, {
     id: "2",
     title: "Book title 2",
     areas: ["friendship", "love", "history"]
   },
   {
     id: "2",
     title: "Book title 3",
     areas: ["friendship", "scifi"]
   }
 ];

This is my array of books and I want to make a new array depending on the areas. For example if user clicks on button - Horror, then I want to load only books that have horror in their -areas-, Im newbie in JS and I cant find a right way to do it. I want to make a new array named filteredBooks. Thank you for your help!

@Mike'Pomax'Kamermans I don't think that's a good duplicate for this. It's not searching for a value in a nested array. — Barmar, Sep 07 '21 at 16:47
I'm sure there are duplicates of this, but I can't find any right now. — Barmar, Sep 07 '21 at 16:48
@barmar the question title was misleading, the actual question itself was about the same "array with objects". not an actually nested array. — Mike 'Pomax' Kamermans, Sep 07 '21 at 17:39
@Mike'Pomax'Kamermans I looked at the question. The property being matched was just a single value, not an array as in this question. — Barmar, Sep 07 '21 at 17:40
They're both about arrays of objects, but the comparison method for the property is completely different. — Barmar, Sep 07 '21 at 17:41

score 10 · Accepted Answer · edited Dec 28 '22 at 21:27

filter() -> uses a callback function the return value of which decides what will be returned in the filtered array. If return value is true, the item is included in the resultant array.

includes() -> searches for something in an array of items using == equality

const books = [{
     id: "1",
     title: "Book title",
     areas: ["horror", "mystery"]
   }, {
     id: "2",
     title: "Book title 2",
     areas: ["friendship", "love", "history"]
   },
   {
     id: "3",
     title: "Book title 3",
     areas: ["friendship", "scifi"]
   }
];

const filterValue = "horror";
const filteredBooks = books.filter(val => val.areas.includes(filterValue));
console.log(filteredBooks);

score 3 · Answer 2 · answered Sep 07 '21 at 17:00

Since there is already a great answer (by @Kirill Savik) for finding a book by a singular genre, I'll take this opportunity to expand on the given answer so that it can take in an array of genres from which to show books with at least one of these genres.

Take a look at this snippet:

const books = [
    {
        id: "1",
        title: "Book title",
        areas: ["horror", "mystery"]
    }, 
    {
        id: "2",
        title: "Book title 2",
        areas: ["friendship", "love", "history"]
    },
    {
        id: "2",
        title: "Book title 3",
        areas: ["friendship", "scifi"]
    }
];

function filter_books(filters) {
    const filteredBooks = [];
    filters.forEach(filterValue => {
        filteredBooks.push(...books.filter(val => val.areas.includes(filterValue)));
    });
    console.log(filteredBooks);
};

filter_books(["horror", "scifi"]); // Outputs all books which have one or more of these ^ genres

It's a bit easier to filter over the books and use `some` to check to see if `areas` includes the filter: `return books.filter(val => filters.some(filter => val.areas.includes(filter)))`. — Andy, Sep 07 '21 at 17:23

How to filter an array in array of objects in Javascript?

2 Answers2