CODEWITHSUNDEEP
javascript
brabus
brabus

Reputation: 25

Filter Multiple of an array Javascript

I have an array and I want to filter this array by Country and Service.

this the array:

const myData = [
   {country : "USA" , Service : "PHONE" },
   {country : "FRANCE" , Service : "DATA"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "CHINA" ,Service : "CAFE"}
   {country : "ITALY" ,Service : "CAFE"}

]

I want to filter this array by country or multiple countries and also by Service or multiple services

I tried this code but return me it's only by one country

let filt = myData.filter((v) => {

   return v.country === "CHINA"
})

console.log(filt);

for ex i want to return only ITALY and FRANCE where Service CAFE

Upvotes: 0

Views: 93

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50884

You can change your condition to be:

(v.country === "CHINA" || v.country === "ITALY") && v.Service === "CAFE"

The .filter() method will keep all objects which the callback function returns true for. The above condition will return true when the country is either "CHINA" or (||) "ITALY" and (&&) the Service is equal to "CAFE".

See example below:

const myData = [
   {country : "USA" , Service : "PHONE" },
   {country : "FRANCE" , Service : "DATA"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "CHINA" ,Service : "CAFE"},
   {country : "ITALY" ,Service : "CAFE"}
];

let filt = myData.filter((v) => {
   return (v.country === "CHINA" || v.country === "ITALY") && v.Service === "CAFE";
});

console.log(filt);

Note that the parentheses around (v.country === "CHINA" || v.country === "ITALY") are required. As && has higher operator precedence than ||, the expression would instead evaluate like so:

v.country === "CHINA" || (v.country === "ITALY" && v.Service === "CAFE")

which will give you incorrect values (as it will return true for when the country is "CHINA", ignoring the value of Service)

You can also make this more dynamic if need be by placing the countries and service you want to keep into a Set, and then checking if the Set .has() the value of v.country and v.Service in it:

const myData = [
  {country : "USA" , Service : "PHONE" },
  {country : "FRANCE" , Service : "DATA"},
  {country : "FRANCE" ,Service : "CAFE"},
  {country : "FRANCE" ,Service : "CAFE"},
  {country : "CHINA" ,Service : "CAFE"},
  {country : "ITALY" ,Service : "CAFE"}
];

const keepCountries = new Set(["CHINA", "ITALY"]);
const keepServices = new Set(["CAFE"]);
let filt = myData.filter((v) => {
   return keepCountries.has(v.country) && keepServices.has(v.Service);
});

console.log(filt);

Note: The usage of the Set here is to speed things up if your keepCountries array and keepServices array are large. For this demonstration case, they are small, so the set can be a standard array, which will require you to use .includes() instead of .has() when checking if a value is contained within the array.

Upvotes: 2

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

You can set the condition of filter to whatever condition you want. Something like this.

const myData = [
   {country : "USA" , Service : "PHONE" },
   {country : "FRANCE" , Service : "DATA"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "CHINA" ,Service : "CAFE"},
   {country : "ITALY" ,Service : "CAFE"}
];
let filt = myData.filter((v) => {
   return (v.country === "ITALY" || v.country === "FRANCE") && v.Service === "CAFE";
})

console.log(filt);

Refer to Nick Parson's answer. It's much clearer.

Upvotes: 0

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20954

You could use the Array.prototype.includes() method to match multiple criteria at once. When looping over each object, you can check if both the country and service match any of the items in the array that you pass.

This allows you to make a flexible function that can check for multiple combinations based on your query.

const myData = [
   {country : "USA" , Service : "PHONE" },
   {country : "USA" , Service : "CAFE" },
   {country : "FRANCE" , Service : "DATA"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "FRANCE" ,Service : "CAFE"},
   {country : "CHINA" ,Service : "CAFE"},
   {country : "CHINA" ,Service : "PHONE"},
   {country : "ITALY" ,Service : "DATA"},
   {country : "ITALY" ,Service : "PHONE"}
];

const filterData = (countries, services, data) => 
  data.filter(({ country, Service }) => 
    (countries.includes(country) && services.includes(Service)));

const resultFranceChinaCafes = filterData(['FRANCE', 'CHINA'], ['CAFE'], myData);
const resultUSAItalyPhones = filterData(['USA', 'ITALY'], ['PHONE'], myData);
const resultFranceItalyData = filterData(['FRANCE', 'ITALY'], ['DATA'], myData);

console.log(resultFranceChinaCafes);
console.log(resultUSAItalyPhones);
console.log(resultFranceItalyData);

Upvotes: 0

Related Questions