Search for multiple filters in JSON using Javascript forEach and indexOf

Question

I have data in JSON format in which I need to perform search. There are different tags available and when I click on them it searches in JSON and returns the items which has those tags. For this I am using a js function. It works correctly for the first time but When I push second filter in the function it returns wrong data.

Available Filters are:

Binding

Paperback
Hardcover
Audiobook
Boxed Set

Category

Classic Rock
Pop
Pop Rock
Electro Pop
Soft Rock
Rock

Language

German
English
French

Author

Male
Female
Male/Female

Here is the JSON and code I am using:

var m = {
      "Books": [{
          "title": "Book 1",
          "binding": "paperback",
          "category": "pop",
          "language": "english",
          "author": "male"
        },
        {
          "title": "Book 2",
          "binding": "hardcover",
          "category": "pop rock,electro pop",
          "language": "french",
          "author": "female"
        },
        {
          "title": "Book 3",
          "binding": "audiobook",
          "category": "soft rock",
          "language": "german",
          "author": "male,female"
        },
        {
          "title": "Book 4",
          "binding": "boxed set",
          "category": "rock,classic rock",
          "language": "english",
          "author": "female,male"
        },
        {
          "title": "Book 5",
          "binding": "paperback",
          "category": "electro pop,rock,classic rock",
          "language": "french",
          "author": "male/female"
        },
        {
          "title": "Book 6",
          "binding": "paperback",
          "category": "rock",
          "language": "french",
          "author": "male"
        }
      ]
    }


    // a function which accepts key which is one of binding,category,language,author.
    // the array will be filtered on this key
    function getFilteredElement(key, value) {
        var bookFilter = [];
        m.Books.forEach(function(item){
           var getFilterField = item[key];
           // since the value is a string, so splitting it and creating an array
           var keyArray = item[key].split(',');
           // now checking if the passed value has a presence in the  above array
           if (keyArray.indexOf(value) !== -1) {
               // if present pushed the book name
               bookFilter.push(item.title);
           }
       });
        // returning the array of books
        return bookFilter;
    }

    console.log(getFilteredElement('category', 'rock'))

For e.g. When I push category = rock it returns Book 4, Book 5 and Book 6 but If I push category = rock and language = french, the returned result should only be Book 5 but it doesn't return correct results.

Could anyone please help.

I works to me, I don't know if your are calling the function from different places — David Vicente
– David Vicente, Commented Dec 13, 2017 at 11:26
@David If I push category = rock and language = french, the returned result should only be Book 5 but it doesn't return correct results. — hashtagerrors
– hashtagerrors, Commented Dec 13, 2017 at 11:29
These are my outputs for those calls: [ 'Book 4', 'Book 5', 'Book 6' ] [ 'Book 2', 'Book 5', 'Book 6' ] I think they are right — David Vicente
– David Vicente, Commented Dec 13, 2017 at 11:38
btw, JSON is a string. what you have is an array with objects. — Nina Scholz
– Nina Scholz, Commented Dec 13, 2017 at 11:38

Nina Scholz · Accepted Answer · 2017-12-13 12:09:18Z

5

You could use an object for filters and take the keys the key to search for and the value as excact value for the string.

Properties with commas are splitted and checked.

function getBooks(filters) {
    return array.Books.filter(function (o) {
        return Object.keys(filters).every(function (k) {
            return o[k].split(',').some(function (v) {
                return v === filters[k];
            });
        });
    });
    //.map(function (o) {
    //    return o.title;
    //});
}

var array = { Books: [{ title: "Book 1", binding: "paperback", category: "pop", language: "english", author: "male" }, { title: "Book 2", binding: "hardcover", category: "pop rock,electro pop", language: "french", author: "female" }, { title: "Book 3", binding: "audiobook", category: "soft rock", language: "german", author: "male,female" }, { title: "Book 4", binding: "boxed set", category: "rock,classic rock", language: "english", author: "female,male" }, { title: "Book 5", binding: "paperback", category: "electro pop,rock,classic rock", language: "french", author: "male/female" }, { title: "Book 6", binding: "paperback", category: "rock", language: "french", author: "male" }] };

console.log(getBooks({ category: 'rock' }));
console.log(getBooks({ category: 'rock', language: 'french' }));

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Dec 13, 2017 at 12:09

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hashtagerrors Over a year ago

Please allow me 5 minutes so that I could check it for all available conditions.

Arman Charan Over a year ago

I was going to suggest this next. You need a stricter comparison mechanism ===. includes() and indexOf() aren't strict enough for what you want.

hashtagerrors Over a year ago

Right. This is working as per my needs. I am implementing this in my code.

hashtagerrors Over a year ago

Your code works perfect. But I get an error when Cannot read property 'split' of undefined when I try to push the tags with help of a function. The code I am using is:

var runSearch = function() {     var query = [];     var keys = [];     var count = 0;     for (var i in searchTags) {         for (var j = 0; j < searchTags[i].length; j++) {             //category: 'rock'             query.push(i + ": '" + searchTags[i][j] + "'");         }     }     var queryString = query.join(' , ');     console.log('{' + queryString + '}');     return '{' + queryString + '}'; }

hashtagerrors Over a year ago

This returns filters: "{category: 'rock' , author: 'male'}" on console.log('filters: ' + JSON.stringify(filters)); and returns k : 0 on console.log('k : ' + k); But when I use static value in function like getBooks({ category: 'rock', language: 'french' }) this returns filters: "{author: 'male'}" and k : author

|

Arman Charan · Accepted Answer · 2017-12-13 11:54:01Z

2

Use can utilize Array.prototype.filter(), Array.prototype.reduce(), and String.prototype.includes() to create such a filtration system, wherein an array of filters consisting of key value pairs can progressively be added to in order to refine an array of books.

See below for a practical example.

// Books.
const books = [
  {
    "title": "Book 1",
    "binding": "paperback",
    "category": "pop",
    "language": "english",
    "author": "male"
  },
  {
    "title": "Book 2",
    "binding": "hardcover",
    "category": "pop rock,electro pop",
    "language": "french",
    "author": "female"
  },
  {
    "title": "Book 3",
    "binding": "audiobook",
    "category": "soft rock",
    "language": "german",
    "author": "male,female"
  },
  {
    "title": "Book 4",
    "binding": "boxed set",
    "category": "rock,classic rock",
    "language": "english",
    "author": "female,male"
  },
  {
    "title": "Book 5",
    "binding": "paperback",
    "category": "electro pop,rock,classic rock",
    "language": "french",
    "author": "male/female"
  },
  {
    "title": "Book 6",
    "binding": "paperback",
    "category": "rock",
    "language": "french",
    "author": "male"
  }
]

// Query.
const query = (books, filters) => {

  // filters = [{key: 'category', value: 'string'}..]

  return books.filter((book) => {

    // Found?
    return filters.reduce((found, filter) => {
      if (!(book[filter.key].includes(filter.value))) return false
      return found
    }, true)

  })

}

// Log.
console.log('Category = Rock', query(books, [{key: 'category', value: 'rock'}]))
console.log('Category = Rock + Language = French', query(books, [{key: 'language', value: 'french'}]))

console.log('Paperback', query(books, [{key: 'binding', value: 'paperback'}])) // Paperback.
console.log('Paperback + Male', query(books, [{key: 'binding', value: 'paperback'}, {key: 'author', value: 'male'}])) // Paperback + Male.
console.log('Paperback + Male + Pop', query(books, [{key: 'binding', value: 'paperback'}, {key: 'author', value: 'male'}, {key: 'category', value: 'pop'}])) // Paperback + Male + Pop.

edited Dec 13, 2017 at 11:54

answered Dec 13, 2017 at 11:25

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

3 Comments

hashtagerrors Over a year ago

Looks Nice. I am checking the code for all available conditions.

Arman Charan Over a year ago

Aah yep I see what you mean though. You want the filtration to be stricter. ie. 'rock' != 'soft rock'.

hashtagerrors Over a year ago

Yes. While testing I used console.log('multiple category', query(books, [{key: 'category', value: 'rock'}])) This returns Book 2,3,4,5 and 6 but only Book 4,5 and 6 contains Rock

David Vicente · Accepted Answer · 2017-12-13 12:00:25Z

0

This approach solve your problem:

function applyFilters(books, filters) {
    for(let filter of filters) {
        var key = filter[0];
        var value = filter[1];
        books = getFilteredElement(books, key, value);
    }

    return books.map(book => book.title);
}

// a function which accepts key which is one of binding,category,language,author.
// the array will be filtered on this key
function getFilteredElement(books, key, value) {
    var bookFilter = [];
    books.forEach(function(item){
       var getFilterField = item[key];
       // since the value is a string, so splitting it and creating an array
       var keyArray = item[key].split(',');
       // now checking if the passed value has a presence in the  above array
       if (keyArray.indexOf(value) !== -1) {
           // if present pushed the book name
           bookFilter.push(item);
       }
   });
    // returning the array of books
    return bookFilter;
}

var filtersToApply = [["category", "rock"], ["language", "french"]];
var bookFilter = applyFilters(m.Books, filtersToApply);
console.log(bookFilter);

answered Dec 13, 2017 at 12:00

David Vicente

3,1311 gold badge20 silver badges27 bronze badges

1 Comment

hashtagerrors Over a year ago

Please allow me 5 minutes so that I could check it for all available conditions.

Collectives™ on Stack Overflow

Search for multiple filters in JSON using Javascript forEach and indexOf

3 Answers 3

9 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related