Learn how to query an array in the Firestore database with the new "array-contains" option in version 5.3 https://angularfirebase.com/lessons/query-by-array-contains-firestore/

- 5.3 SDK https://firebase.google.com/support/release-notes/js
- Firestore https://firebase.google.com/docs/firestore/
2024-02-04T07:24:32.185Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ebc3c665-507b-40c3-a579-cf81e362f178
871c6666150c40000087c76cea72c402e88afccbb4a66fb371cba92036554d5e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Version 5.3 of the Firebase Web SDK came out a couple weeks ago, and it includes a cool new feature to query documents based on an array value.
This means you can get all of the documents that have an array field that contain a certain value in that array.
This video is going to be a lot shorter than most of the content find on my channel.
But if you like this format, please leave me a comment below because I'm considering adding a couple extra videos to the channel per week that are just a couple minutes long that cover really focused topics like this one here.
Alright.
So let's just go ahead and jump right into the code.
I'm here in an empty directory, and I have firebase tools installed.
And I'll initialize a new project by running firebase init.
And then we'll set up Firestore as well as hosting.
And if you already have a Firebase project, you can just Skip this step completely, but make sure you have version 5.3 or greater of the SDK installed.
At this point, I can just run Firebase serve in my project, And we should get this initial splash page.
The next thing I'll do is take out the default JavaScript that's provided by Firebase, And we'll just replace this with our own app dotjs file.
Now that we have our web app set up, we can start writing the actual code.
The first thing we'll wanna do is make a reference to Firestore.
Then we also need to update our Firestore settings to avoid an error in the console, which is just setting the time stamps and snapshots to true.
Then I have some existing data in my database, which is in the carts collection.
You can imagine this as a shopping cart in an ecommerce application, but let's jump to the Firebase console to see what it looks like.
Each cart has an items field which is an array of different string values.
So right now, you can see that carts a and b both have bananas in them.
Let's go ahead and add a 3rd cart that also contains bananas, but some additional values as Well, and our goal is to be able to query these documents based on the shared values in this item's array.
To handle this, we can actually just use the where clause, but it now has an additional operator that we can use specifically for arrays.
So we'll say collection where the items array array contains whatever value we wanna search by.
So this is different than the normal conditional operators that you might use such as equals or greater than or equal to.
A caveat with this method is that you can only use it once.
It's not currently possible to chain together multiple array contains clauses in a single query.
The final step is to get the data from this query.
And then we'll go ahead and map that promise down to the actual raw data as well as the document ID.
For each document that's returned in the query, we'll go ahead and just console log it to the browser.
With that done, let's go into the browser and make sure that this actually works.
The LaCroix value is currently only contained in cart a and cart c, so we should only get those 2 documents back.
When we run the query, you can see that that's exactly what we get back in the browser console.
If we change the value to bananas, we should get all 3 documents back.
And as expected, that's exactly what happens.
Overall, this is a really nice feature to have because in the past, what I found myself doing is mapping Arrays to an object just so I could query them in Firestore.
But this array contains operator should eliminate the need to do that in most cases.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you wanna see more short videos like this, don't forget to leave me a comment.
Thanks for watching, and I'll talk to you soon.

Speaker 0: Version 5.3 of the Firebase Web SDK came out a couple weeks ago, and it includes a cool new feature to query documents based on an array value. This means you can get all of the documents that have an array field that contain a certain value in that array. This video is going to be a lot shorter than most of the content find on my channel. But if you like this format, please leave me a comment below because I'm considering adding a couple extra videos to the channel per week that are just a couple minutes long that cover really focused topics like this one here. Alright.

So let's just go ahead and jump right into the code. I'm here in an empty directory, and I have firebase tools installed. And I'll initialize a new project by running firebase init. And then we'll set up Firestore as well as hosting. And if you already have a Firebase project, you can just Skip this step completely, but make sure you have version 5.3 or greater of the SDK installed.

At this point, I can just run Firebase serve in my project, And we should get this initial splash page. The next thing I'll do is take out the default JavaScript that's provided by Firebase, And we'll just replace this with our own app dotjs file. Now that we have our web app set up, we can start writing the actual code. The first thing we'll wanna do is make a reference to Firestore. Then we also need to update our Firestore settings to avoid an error in the console, which is just setting the time stamps and snapshots to true.

Then I have some existing data in my database, which is in the carts collection. You can imagine this as a shopping cart in an ecommerce application, but let's jump to the Firebase console to see what it looks like. Each cart has an items field which is an array of different string values. So right now, you can see that carts a and b both have bananas in them. Let's go ahead and add a 3rd cart that also contains bananas, but some additional values as Well, and our goal is to be able to query these documents based on the shared values in this item's array.

To handle this, we can actually just use the where clause, but it now has an additional operator that we can use specifically for arrays. So we'll say collection where the items array array contains whatever value we wanna search by. So this is different than the normal conditional operators that you might use such as equals or greater than or equal to. A caveat with this method is that you can only use it once. It's not currently possible to chain together multiple array contains clauses in a single query.

The final step is to get the data from this query. And then we'll go ahead and map that promise down to the actual raw data as well as the document ID. For each document that's returned in the query, we'll go ahead and just console log it to the browser. With that done, let's go into the browser and make sure that this actually works. The LaCroix value is currently only contained in cart a and cart c, so we should only get those 2 documents back.

When we run the query, you can see that that's exactly what we get back in the browser console. If we change the value to bananas, we should get all 3 documents back. And as expected, that's exactly what happens. Overall, this is a really nice feature to have because in the past, what I found myself doing is mapping Arrays to an object just so I could query them in Firestore. But this array contains operator should eliminate the need to do that in most cases.

I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna see more short videos like this, don't forget to leave me a comment. Thanks for watching, and I'll talk to you soon.
Version 5.3 of the Firebase Web SDK came out a couple weeks ago, and it includes a cool new feature to query documents based on an array value.
This means you can get all of the documents that have an array field that contain a certain value in that array. This video is going to be a lot shorter than most of the content find on my channel. But if you like this format, please leave me a comment below because I'm considering adding a couple extra videos to the channel per week that are just a couple minutes long that cover really focused topics like this one here. Alright. So let's just go ahead and jump right into the code.
youtube
streaming
video gaming
television
multimedia
I'm here in an empty directory, and I have firebase tools installed. And I'll initialize a new project by running firebase init. And then we'll set up Firestore as well as hosting. And if you already have a Firebase project, you can just Skip this step completely, but make sure you have version 5.3 or greater of the SDK installed. At this point, I can just run Firebase serve in my project, And we should get this initial splash page. The next thing I'll do is take out the default JavaScript that's provided by Firebase, And we'll just replace this with our own app dotjs file. Now that we have our web app set up, we can start writing the actual code. The first thing we'll wanna do is make a reference to Firestore. Then we also need to update our Firestore settings to avoid an error in the console, which is just setting the time stamps and snapshots to true.
Then I have some existing data in my database, which is in the carts collection. You can imagine this as a shopping cart in an ecommerce application, but let's jump to the Firebase console to see what it looks like. Each cart has an items field which is an array of different string values.
databases
data management
data
So right now, you can see that carts a and b both have bananas in them. Let's go ahead and add a 3rd cart that also contains bananas, but some additional values as Well, and our goal is to be able to query these documents based on the shared values in this item's array. To handle this, we can actually just use the where clause, but it now has an additional operator that we can use specifically for arrays. So we'll say collection where the items array array contains whatever value we wanna search by. So this is different than the normal conditional operators that you might use such as equals or greater than or equal to.
A caveat with this method is that you can only use it once. It's not currently possible to chain together multiple array contains clauses in a single query. The final step is to get the data from this query. And then we'll go ahead and map that promise down to the actual raw data as well as the document ID. For each document that's returned in the query, we'll go ahead and just console log it to the browser.
databases
With that done, let's go into the browser and make sure that this actually works. The LaCroix value is currently only contained in cart a and cart c, so we should only get those 2 documents back. When we run the query, you can see that that's exactly what we get back in the browser console. If we change the value to bananas, we should get all 3 documents back. And as expected, that's exactly what happens. Overall, this is a really nice feature to have because in the past, what I found myself doing is mapping Arrays to an object just so I could query them in Firestore. But this array contains operator should eliminate the need to do that in most cases. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe.
And if you wanna see more short videos like this, don't forget to leave me a comment. Thanks for watching, and I'll talk to you soon.
youtube
Version 5.3 of the Firebase Web SDK came out a couple weeks ago, and it includes a cool new feature to query documents based on an array value. This means you can get all of the documents that have an array field that contain a certain value in that array. This video is going to be a lot shorter than most of the content find on my channel. But if you like this format, please leave me a comment below because I'm considering adding a couple extra videos to the channel per week that are just a couple minutes long that cover really focused topics like this one here. Alright. So let's just go ahead and jump right into the code. I'm here in an empty directory, and I have firebase tools installed. And I'll initialize a new project by running firebase init. And then we'll set up Firestore as well as hosting. And if you already have a Firebase project, you can just Skip this step completely, but make sure you have version 5.3 or greater of the SDK installed. At this point, I can just run Firebase serve in my project, And we should get this initial splash page. The next thing I'll do is take out the default JavaScript that's provided by Firebase, And we'll just replace this with our own app dotjs file. Now that we have our web app set up, we can start writing the actual code. The first thing we'll wanna do is make a reference to Firestore. Then we also need to update our Firestore settings to avoid an error in the console, which is just setting the time stamps and snapshots to true. Then I have some existing data in my database, which is in the carts collection. You can imagine this as a shopping cart in an ecommerce application, but let's jump to the Firebase console to see what it looks like. Each cart has an items field which is an array of different string values. So right now, you can see that carts a and b both have bananas in them. Let's go ahead and add a 3rd cart that also contains bananas, but some additional values as Well, and our goal is to be able to query these documents based on the shared values in this item's array. To handle this, we can actually just use the where clause, but it now has an additional operator that we can use specifically for arrays. So we'll say collection where the items array array contains whatever value we wanna search by. So this is different than the normal conditional operators that you might use such as equals or greater than or equal to. A caveat with this method is that you can only use it once. It's not currently possible to chain together multiple array contains clauses in a single query. The final step is to get the data from this query. And then we'll go ahead and map that promise down to the actual raw data as well as the document ID. For each document that's returned in the query, we'll go ahead and just console log it to the browser. With that done, let's go into the browser and make sure that this actually works. The LaCroix value is currently only contained in cart a and cart c, so we should only get those 2 documents back. When we run the query, you can see that that's exactly what we get back in the browser console. If we change the value to bananas, we should get all 3 documents back. And as expected, that's exactly what happens. Overall, this is a really nice feature to have because in the past, what I found myself doing is mapping Arrays to an object just so I could query them in Firestore. But this array contains operator should eliminate the need to do that in most cases. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna see more short videos like this, don't forget to leave me a comment. Thanks for watching, and I'll talk to you soon.
Version
version
5.3
5.3
of
of
the
the
Firebase
firebase
Web
web
SDK
sdk
came
came
out
out
a
a
couple
couple
weeks
weeks
ago,
ago
and
and
it
it
includes
includes
a
a
cool
cool
new
new
feature
feature
to
to
query
query
documents
documents
based
based
on
on
an
an
array
array
value.
value
This
this
means
means
you
you
can
can
get
get
all
all
of
of
the
the
documents
documents
that
that
have
have
an
an
array
array
field
field
that
that
contain
contain
a
a
certain
certain
value
value
in
in
that
that
array.
array
This
this
video
video
is
is
going
going
to
to
be
be
a
a
lot
lot
shorter
shorter
than
than
most
most
of
of
the
the
content
content
find
find
on
on
my
my
channel.
channel
But
but
if
if
you
you
like
like
this
this
format,
format
please
please
leave
leave
me
me
a
a
comment
comment
below
below
because
because
I'm
i'm
considering
considering
adding
adding
a
a
couple
couple
extra
extra
videos
videos
to
to
the
the
channel
channel
per
per
week
week
that
that
are
are
just
just
a
a
couple
couple
minutes
minutes
long
long
that
that
cover
cover
really
really
focused
focused
topics
topics
like
like
this
this
one
one
here.
here
Alright.
alright
So
so
let's
let's
just
just
go
go
ahead
ahead
and
and
jump
jump
right
right
into
into
the
the
code.
code
I'm
i'm
here
here
in
in
an
an
empty
empty
directory,
directory
and
and
I
i
have
have
firebase
firebase
tools
tools
installed.
installed
And
and
I'll
i'll
initialize
initialize
a
a
new
new
project
project
by
by
running
running
firebase
firebase
init.
init
And
and
then
then
we'll
we'll
set
set
up
up
Firestore
firestore
as
as
well
well
as
as
hosting.
hosting
And
and
if
if
you
you
already
already
have
have
a
a
Firebase
firebase
project,
project
you
you
can
can
just
just
Skip
skip
this
this
step
step
completely,
completely
but
but
make
make
sure
sure
you
you
have
have
version
version
5.3
5.3
or
or
greater
greater
of
of
the
the
SDK
sdk
installed.
installed
At
at
this
this
point,
point
I
i
can
can
just
just
run
run
Firebase
firebase
serve
serve
in
in
my
my
project,
project
And
and
we
we
should
should
get
get
this
this
initial
initial
splash
splash
page.
page
The
the
next
next
thing
thing
I'll
i'll
do
do
is
is
take
take
out
out
the
the
default
default
JavaScript
javascript
that's
that's
provided
provided
by
by
Firebase,
firebase
And
and
we'll
we'll
just
just
replace
replace
this
this
with
with
our
our
own
own
app
app
dotjs
dotjs
file.
file
Now
now
that
that
we
we
have
have
our
our
web
web
app
app
set
set
up,
up
we
we
can
can
start
start
writing
writing
the
the
actual
actual
code.
code
The
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
make
make
a
a
reference
reference
to
to
Firestore.
firestore
Then
then
we
we
also
also
need
need
to
to
update
update
our
our
Firestore
firestore
settings
settings
to
to
avoid
avoid
an
an
error
error
in
in
the
the
console,
console
which
which
is
is
just
just
setting
setting
the
the
time
time
stamps
stamps
and
and
snapshots
snapshots
to
to
true.
true
Then
then
I
i
have
have
some
some
existing
existing
data
data
in
in
my
my
database,
database
which
which
is
is
in
in
the
the
carts
carts
collection.
collection
You
you
can
can
imagine
imagine
this
this
as
as
a
a
shopping
shopping
cart
cart
in
in
an
an
ecommerce
ecommerce
application,
application
but
but
let's
let's
jump
jump
to
to
the
the
Firebase
firebase
console
console
to
to
see
see
what
what
it
it
looks
looks
like.
like
Each
each
cart
cart
has
has
an
an
items
items
field
field
which
which
is
is
an
an
array
array
of
of
different
different
string
string
values.
values
So
so
right
right
now,
now
you
you
can
can
see
see
that
that
carts
carts
a
a
and
and
b
b
both
both
have
have
bananas
bananas
in
in
them.
them
Let's
let's
go
go
ahead
ahead
and
and
add
add
a
a
3rd
3rd
cart
cart
that
that
also
also
contains
contains
bananas,
bananas
but
but
some
some
additional
additional
values
values
as
as
Well,
well
and
and
our
our
goal
goal
is
is
to
to
be
be
able
able
to
to
query
query
these
these
documents
documents
based
based
on
on
the
the
shared
shared
values
values
in
in
this
this
item's
item's
array.
array
To
to
handle
handle
this,
this
we
we
can
can
actually
actually
just
just
use
use
the
the
where
where
clause,
clause
but
but
it
it
now
now
has
has
an
an
additional
additional
operator
operator
that
that
we
we
can
can
use
use
specifically
specifically
for
for
arrays.
arrays
So
so
we'll
we'll
say
say
collection
collection
where
where
the
the
items
items
array
array
array
array
contains
contains
whatever
whatever
value
value
we
we
wanna
wanna
search
search
by.
by
So
so
this
this
is
is
different
different
than
than
the
the
normal
normal
conditional
conditional
operators
operators
that
that
you
you
might
might
use
use
such
such
as
as
equals
equals
or
or
greater
greater
than
than
or
or
equal
equal
to.
to
A
a
caveat
caveat
with
with
this
this
method
method
is
is
that
that
you
you
can
can
only
only
use
use
it
it
once.
once
It's
it's
not
not
currently
currently
possible
possible
to
to
chain
chain
together
together
multiple
multiple
array
array
contains
contains
clauses
clauses
in
in
a
a
single
single
query.
query
The
the
final
final
step
step
is
is
to
to
get
get
the
the
data
data
from
from
this
this
query.
query
And
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
map
map
that
that
promise
promise
down
down
to
to
the
the
actual
actual
raw
raw
data
data
as
as
well
well
as
as
the
the
document
document
ID.
id
For
for
each
each
document
document
that's
that's
returned
returned
in
in
the
the
query,
query
we'll
we'll
go
go
ahead
ahead
and
and
just
just
console
console
log
log
it
it
to
to
the
the
browser.
browser
With
with
that
that
done,
done
let's
let's
go
go
into
into
the
the
browser
browser
and
and
make
make
sure
sure
that
that
this
this
actually
actually
works.
works
The
the
LaCroix
lacroix
value
value
is
is
currently
currently
only
only
contained
contained
in
in
cart
cart
a
a
and
and
cart
cart
c,
c
so
so
we
we
should
should
only
only
get
get
those
those
2
2
documents
documents
back.
back
When
when
we
we
run
run
the
the
query,
query
you
you
can
can
see
see
that
that
that's
that's
exactly
exactly
what
what
we
we
get
get
back
back
in
in
the
the
browser
browser
console.
console
If
if
we
we
change
change
the
the
value
value
to
to
bananas,
bananas
we
we
should
should
get
get
all
all
3
3
documents
documents
back.
back
And
and
as
as
expected,
expected
that's
that's
exactly
exactly
what
what
happens.
happens
Overall,
overall
this
this
is
is
a
a
really
really
nice
nice
feature
feature
to
to
have
have
because
because
in
in
the
the
past,
past
what
what
I
i
found
found
myself
myself
doing
doing
is
is
mapping
mapping
Arrays
arrays
to
to
an
an
object
object
just
just
so
so
I
i
could
could
query
query
them
them
in
in
Firestore.
firestore
But
but
this
this
array
array
contains
contains
operator
operator
should
should
eliminate
eliminate
the
the
need
need
to
to
do
do
that
that
in
in
most
most
cases.
cases
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
don't
don't
forget
forget
to
to
leave
leave
me
me
a
a
comment.
comment
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains that the advised video will be shorter than the content found on their channel. They then proceed to code the code for theare web app, including updating the Fir Teng settings and the cart collection. The code is run in a empty directory and the first step is to make a reference to the where clause. The second step is to update the Fir Teng settings and the cart collection. The third step is to map the promise down to the actual raw data and the document ID.
Firestore Array Query
Version 5.3 of the Firebase Web SDK came out a couple weeks ago, and it includes a cool new feature to query documents based on an array value. This means you can get all of the documents that have an array field that contain a certain value in that array. This video is going to be a lot shorter than most of the content find on my channel. But if you like this format, please leave me a comment below because I'm considering adding a couple extra videos to the channel per week that are just a couple minutes long that cover really focused topics like this one here. Alright. So let's just go ahead and jump right into the code. I'm here in an empty directory, and I have firebase tools installed. And I'll initialize a new project by running firebase init. And then we'll set up Firestore as well as hosting. And if you already have a Firebase project, you can just Skip this step completely, but make sure you have version 5.3 or greater of the SDK installed. At this point, I can just run Firebase serve in my project, And we should get this initial splash page. The next thing I'll do is take out the default JavaScript that's provided by Firebase, And we'll just replace this with our own app dotjs file. Now that we have our web app set up, we can start writing the actual code. The first thing we'll wanna do is make a reference to Firestore. Then we also need to update our Firestore settings to avoid an error in the console, which is just setting the time stamps and snapshots to true. Then I have some existing data in my database, which is in the carts collection. You can imagine this as a shopping cart in an ecommerce application, but let's jump to the Firebase console to see what it looks like. Each cart has an items field which is an array of different string values. So right now, you can see that carts a and b both have bananas in them. Let's go ahead and add a 3rd cart that also contains bananas, but some additional values as Well, and our goal is to be able to query these documents based on the shared values in this item's array. To handle this, we can actually just use the where clause, but it now has an additional operator that we can use specifically for arrays. So we'll say collection where the items array array contains whatever value we wanna search by. So this is different than the normal conditional operators that you might use such as equals or greater than or equal to. A caveat with this method is that you can only use it once. It's not currently possible to chain together multiple array contains clauses in a single query. The final step is to get the data from this query. And then we'll go ahead and map that promise down to the actual raw data as well as the document ID. For each document that's returned in the query, we'll go ahead and just console log it to the browser. With that done, let's go into the browser and make sure that this actually works. The LaCroix value is currently only contained in cart a and cart c, so we should only get those 2 documents back. When we run the query, you can see that that's exactly what we get back in the browser console. If we change the value to bananas, we should get all 3 documents back. And as expected, that's exactly what happens. Overall, this is a really nice feature to have because in the past, what I found myself doing is mapping Arrays to an object just so I could query them in Firestore. But this array contains operator should eliminate the need to do that in most cases. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna see more short videos like this, don't forget to leave me a comment. Thanks for watching, and I'll talk to you soon.
The speaker explains that the advised video will be shorter than the content found on their channel. They then proceed to code the code for theare web app, including updating the Fir Teng settings and the cart collection. The code is run in a empty directory and the first step is to make a reference to the where clause. The second step is to update the Fir Teng settings and the cart collection. The third step is to map the promise down to the actual raw data and the document ID.