CODEWITHSUNDEEP
javascriptarraysfilter
Igor
Igor

Reputation: 408

filter array in array of objects

i have this array:

[
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
]

i want to filter this by any terms that the users type

i already got this, works only for title, but i want to search by title and category: 

array.filter(f => f.title.includes(myString))

Upvotes: 0

Views: 69

Answers (3)

anyeloert
anyeloert

Reputation: 31

I think this is enough if you just want to filter by title or category

const array = [
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
]

const string = 'Brazil'// whatever the user types

const result = array.filter(f => f.title === string || f.categories.includes(string))
console.log(result);

Upvotes: 1

iPzard
iPzard

Reputation: 2368

If you only want items that match your title and category, you can do this to get an array of matches. 

array.filter(f => f.title === 'myTitle' && f.categories.includes('myCategory'));

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370619

Alternate with || with a .some check on f.categories:

array.filter(f =>
  f.title.includes(myString) ||
  f.categories.some(
    category => category.includes(myString)
  )
);

Live demo:

const array = [
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
];

const input = document.querySelector('input');
input.addEventListener('input', () => {
  document.querySelector('div').textContent = JSON.stringify(
    array.filter(f =>
      f.title.includes(input.value) ||
      f.categories.some(
        category => category.includes(input.value)
      )
    )
  );
});
<input>
<div></div>

This isn't the logic your original code is implementing, but if you also need to check for different case matches:

const array = [
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
];

const input = document.querySelector('input');
input.addEventListener('input', () => {
  const value = input.value.toLowerCase();
  document.querySelector('div').textContent = JSON.stringify(
    array.filter(f =>
      f.title.toLowerCase().includes(value) ||
      f.categories.some(
        category => category.toLowerCase().includes(value)
      )
    )
  );
});
<input>
<div></div>

Upvotes: 3

Related Questions