How to filter an array based on property value, or existence of properties

Question

How would I go about filtering an array based on specific properties within it?

For example, if I only wanted the objects with the season property in them.

[
  {
    population: 121321313,
    location: 'American city in the East',
  },
  {
    season: 'winter',
    population: 54646546,
    location: 'Canadian city in the East',
  },
  {
    population: 6546467,
    location: 'American city in the West',
  },
  {
    season: 'fall',
    population: 145313,
    location: 'American city in the South',
  },
  {
    population: 12673,
    location: 'Canadian city2 in the East',
  },
  {
    population: 141313,
    location: 'Canadian city in the South',
  },
  {
    season: 'fall',
    population: 1264473,
    location: 'Canadian city4 in the East',
  },
  {
    population: 12673,
    location: 'Canadian city6 in the South',
  },
];

Does this answer your question? [How to filter object array based on attributes?](https://stackoverflow.com/questions/2722159/how-to-filter-object-array-based-on-attributes) and [Test for existence of nested JavaScript object key](https://stackoverflow.com/q/2631001/215552) — Heretic Monkey, Dec 02 '21 at 22:34

D M · Accepted Answer · 2021-12-02T22:33:07.083

You're looking for Object#hasOwnProperty. Specifially, you're looking to filter your array to only the items which have the property season which you can accomplish like this:

const cities = [
  { "population": 121321313, "location": "American city in the East" },
  { "season": "winter", "population": 54646546, "location": "Canadian city in the East" },
  { "population": 6546467,"location": "American city in the West"},
  { "season": "fall", "population": 145313, "location": "American city in the South" },
  { "population": 12673, "location": "Canadian city2 in the East" },
  { "population": 141313, "location": "Canadian city in the South" },
  { "season": "fall", "population": 1264473, "location": "Canadian city4 in the East" },
  { "population": 12673, "location": "Canadian city6 in the South" }
];

const filteredCities = cities.filter(x => x.hasOwnProperty("season"));

console.dir(filteredCities);

You could also use the more modern Reflect.has. See Javascript object.hasOwnProperty() vs Reflect.has() or How do I check if an object has a specific property in JavaScript? for more information.

const cities = [
  { "population": 121321313, "location": "American city in the East" },
  { "season": "winter", "population": 54646546, "location": "Canadian city in the East" },
  { "population": 6546467,"location": "American city in the West"},
  { "season": "fall", "population": 145313, "location": "American city in the South" },
  { "population": 12673, "location": "Canadian city2 in the East" },
  { "population": 141313, "location": "Canadian city in the South" },
  { "season": "fall", "population": 1264473, "location": "Canadian city4 in the East" },
  { "population": 12673, "location": "Canadian city6 in the South" }
];

const filteredCities = cities.filter(x => Reflect.has(x, "season"));

console.dir(filteredCities);

soon to be [`.hasOwn()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) — pilchard, Dec 03 '21 at 01:37

score 0 · Answer 2 · answered Dec 03 '21 at 01:33

0

you can use statement - for..of, for iterate objects then find your items and push to the new array

const list = [
  {
    "population": 121321313,
    "location": "American city in the East"
  },
  {
    "season": "winter",
    "population": 54646546,
    "location": "Canadian city in the East"
  },
  {
    "population": 6546467,
    "location": "American city in the West"
  },
  {
    "season": "fall",
    "population": 145313,
    "location": "American city in the South"
  },
  {
    "population": 12673,
    "location": "Canadian city2 in the East"
  },
  {
    "population": 141313,
    "location": "Canadian city in the South"
  },
  {
    "season": "fall",
    "population": 1264473,
    "location": "Canadian city4 in the East"
  },
  {
    "population": 12673,
    "location": "Canadian city6 in the South"
  }
  
];

let Newarr = [];

for (const item of list) {

  if(Object.hasOwn(item, "season")) {
      Newarr.push(item);
  }
}

console.log(Newarr);

answered Dec 03 '21 at 01:33

mohammadreza khorrami

21
8

`hasOwn` has very incomplete [compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn#browser_compatibility) at the moment, you should only recommend it with that caveat. See @DM's answer for more complete explanation of object property inspection. – pilchard Dec 03 '21 at 01:41
First of all, thank you for your guidance, but I think it's worth using generally Browser compatibility I try by chrome good worked @pilchard – mohammadreza khorrami Dec 03 '21 at 02:11
You tried on one updated browser and so it's fine? The compatiblity table exists for a reason, not everyone is running the most up to date Chrome. [caniuse](https://caniuse.com/?search=hasOwn) – pilchard Dec 03 '21 at 02:15
I do not violate your words, but if we want to think like this, do not use tailwind css because it does not work with older versions of chrome at all @pilchard – mohammadreza khorrami Dec 03 '21 at 02:24

How to filter an array based on property value, or existence of properties

2 Answers2

Linked