I'm trying to filter an array with locations by their cuisines. User can filter locations by single or multiple cuisines. Locations should be filtered by these cuisines. I'm new in JS and tried a lot, but filtering with inner arrays is a new level.

Filter:

const requestedCuisines = ["european", "seafood"]

Data:

{
  "name": "Restaurant A",
  "rating": 5,
  "cuisines": [
    {
        "name": "spanish",
        "localized_name": null,
    },{
        "name": "scandinavian",
        "localized_name": null,
    }, {
        "name": "european",
        "localized_name": "Europees",
    }
  ],
},
{
  "name": "Restaurant B",
  "rating": 5,
  "cuisines": [
    {
        "name": "spanish",
        "localized_name": null,
    }
  ],
},
{
  "name": "Restaurant C",
  "rating": 5,
  "cuisines": [],
}

In this example only Restaurant A should be visible because Restaurant B and C doesn't have any of the requested cuisines.

I tried to return all locations with locations.filter(f => form.cuisines.indexOf(f.cuisines) !== -1) but of course it doesn't work with arrays. Tried a lot of code from Stack Overflow.

CodePudding user response：

You could check if the restaurant that is currently being inspected by the filter function has a cuisine that is included in the requestedCuisines array.

For example like this:

restaurants.filter((restaurant) => restaurant.cuisines.find((cuisine) => requestedCuisines.includes(cuisine.name)))

With the data you provided, the output would look like this:

[{
    name: 'Restaurant A',
    cuisines: [[Object], [Object], [Object]],
    rating: 5
}]

Here is an example you can try:

const requestedCuisines = ["european", "seafood"]
const restaurants = [{
    "name": "Restaurant A",
    "rating": 5,
    "cuisines": [
      {
        "name": "spanish",
        "localized_name": null,
      },
      {
        "name": "scandinavian",
        "localized_name": null,
      }, 
      {
        "name": "european",
        "localized_name": "Europees",
      }
    ],
  },
  {
    "name": "Restaurant B",
    "rating": 5,
    "cuisines": [
      {
        "name": "spanish",
        "localized_name": null,
      }
    ],
  },
  {
    "name": "Restaurant C",
    "rating": 5,
    "cuisines": [],
  }
]

const result = restaurants.filter((restaurant) => restaurant.cuisines.find((cuisine) => requestedCuisines.includes(cuisine.name)))
console.log(result)

CodePudding user response：

1. Loop on the requested cuisines. (Parent loop)
2. Loop on the restaurants. (Child loop)
3. Find if any of the current restaurant's cuisines (from the child loop) are similar to the current requested cuisine (from the parent loop.)

Here is a working example-

const requestedCuisines = ["european", "seafood"]
const restaurants = [{
    "name": "Restaurant A",
    "rating": 5,
    "cuisines": [{
      "name": "spanish",
      "localized_name": null,
    }, {
      "name": "scandinavian",
      "localized_name": null,
    }, {
      "name": "european",
      "localized_name": "Europees",
    }],
  },
  {
    "name": "Restaurant B",
    "rating": 5,
    "cuisines": [{
      "name": "spanish",
      "localized_name": null,
    }],
  },
  {
    "name": "Restaurant C",
    "rating": 5,
    "cuisines": [],
  }
]

// Loop in requested cuisines
requestedCuisines.forEach(req_cuisine => {
  // Loop on restaurant array
  restaurants.forEach(restaurant => {
    let find = restaurant.cuisines.find(item => item.name == req_cuisine)
    if (find) {
      console.log("Visible Restaurant is-", restaurant.name)
    }
  })
})