Use GROQ to Filter Items Based on an Array

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

The in keyboard in GROQ allows you to compare properties from your current JSON object scope against an Array of values to control which values should be returned. This becomes very important when matching against ids, types, and other fields that might exist on two separate JSON objects.

John Lindquist: [0:00] Let's swap out our data for this Pokedex JSON to have a bit more complex data to work with. We'll just delete all of this. I'll use fs-extra just as a way to read a JSON file in as an object. We'll grab the Pokedex JSON. We'll just call this Pokedex, and then drop that into here. Now all of our queries will be run against this Pokedex file.

[0:30] First, let's get all of the data, just to make sure it's working. We'll debug this, and you'll see 151 results, with all of the data intact.

[0:40] Something you'll see on this data that we didn't have before, are these arrays in our JSON, inside of these objects, inside of the root array. When using GROQ and you see arrays, something you can use is the IN keyword. If I want to find all of the poison-type Pokemon, I can say, poison IN type, where Type is the name of this key right here. This will loop through the type array and check for poison.

[1:09] If we run this, you can see we now have 33 results. That means that all of these we found, should have a type of poison in them. You'll see their IDs, there's 1, 2, 3, 13, 14, 15. Their IDs are all across the initial array.

[1:25] Similarly, if we look for a weakness, so a weakness of fire, we can find everything with fire in weaknesses. We'll run this again. In our results, you'll see each of these have a weakness of fire. I'll pick a random one, number 17, as a weakness of fire.

[1:46] We can also flip this syntax around where we can define an array, and look for one of the properties inside of that array. Say, for example, this egg says five kilometers. If I make an array where I'm looking for 5 km, and then I check that against the egg and I run this, you'll see I get 42 results, and each of these will have an egg of 5 km on them.

[2:14] If I also want to include the eggs of 2 km, I can run this. I just added 2 km to the array, and now I have eggs of both 2 km and let's see, 2 km, 2 km, one of these has to be 5 km. There's a 5 km.

[2:30] To make this output easier to read, we still have our projections, where I could say, name and egg can run that. That would make our 2 km and our 5 km eggs easier to find. We could even name something like a property of Hatch, and say, name+hatchesin+egg, we'll run that.

[2:56] Now, each of these has a Hatch property, or I can just simply grab that new Hatch property, run that. You can see we have an array of strings, where we've grabbed every Pokemon where it has an egg of 5 km or 2 km, concatenated their name to their egg, and then flattened it out to an array of strings.

[3:15] When using IN, you can either put the lookup you're using, whether it's the egg on this side, or an array of things like types or weaknesses on that side. It doesn't really matter as long as this is a value and this is an array.

egghead
egghead
~ 40 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today