In Vue, when utilizing Firestore, the .where method doesn't seem to be returning any results even though they do exist in

As a newcomer to Firestore, I'm working on a query to display chat messages that update in real-time when new ones appear. However, I'm facing an issue where only messages from the current user's school should be visible. If I omit the .where clause, all messages are shown, but nothing appears when I include it (even though the messages exist)

You can view an image of my Firestore page through this link since embedding is not possible:

https://i.sstatic.net/pQU2F.jpg

I trigger the method on mount:

mounted() {
  //fetches the messages
  this.fetchMessages(this.$route.params.id);
},

The fetchMessages method used is as follows:

fetchMessages(schoolsIdentification) {
  db.collection('chat')
    .where("user.schoolId", "array-contains", schoolsIdentification)
    .orderBy('date')
    .onSnapshot((querySnapshot) => {
      let allMessages = [];
      querySnapshot.forEach(doc => {
        allMessages.push(doc.data())
      })
      console.log("the all messages array length is:", allMessages.length)
      this.messages = allMessages;
    })
}

Is there something wrong with my implementation here?

Answer №1

Your filter is designed for user.schoolId to be an array:

.where("user.schoolId", "array-contains", schoolsIdentification)

However, it seems that user.schoolId is not actually an array - it's just a string. If you need to filter based on a string field that could have multiple possible values, consider using an "in" query instead, as explained in the official documentation.

With the in operator, you can combine up to 10 equality (==) conditions on the same field using a logical OR. An in query will return documents where the specified field matches any of the comparison values.

.where("user.schoolId", "in", schoolsIdentification)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increase or decrease values in an input field using Vue3 when typing

I am looking to implement a feature where users can input numbers that will be subtracted from a fixed total of 100. However, if the user deletes the input, I want the difference to be added back to the total of 100. Despite my attempts, the subtraction wo ...

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

Extending the declaration of JavaScript native methods is not possible when using TypeScript

When attempting to enhance the JS native String class by adding a new method, I encounter error TS2339. interface String { transl(): string; } String.prototype.transl = function() { // TS2339: Property 'transl' does not exist on type 'St ...

Updating the key within an array of objects

In my array of objects, I have the following data: arrayOfObject = [{'key1': [1,2]} , {'key2': [1,2,3]} , {'key3': [1,2,4]}] I know the name of the key that I want to replace in my array : var keyString = 'key1&apos ...

Is it possible to maintain component data in Angular while also incorporating dynamic components?

All the code you need can be found here: https://stackblitz.com/edit/angular-keep-alive-component?file=src/app/app.component.ts Is it possible to maintain the state of entered values when switching components? I am currently utilizing dynamic component r ...

Is PHP loaded prior to the `html body`?

I'm facing a unique challenge where I am currently transferring variables from a PHP page to hidden HTML inputs. The values are extracted from these hidden inputs using a JavaScript function that is called in the following manner: <body onload=" ...

Unlocking the Power of Ajax for Displaying Wordpress Queries

Running into some issues trying to use jQuery for displaying content. I have set up three buttons that, when clicked, load data from a php file on my server. Everything functions properly except when attempting to retrieve Wordpress posts. An error message ...

What steps can be taken to ensure a function operates even when the mouse is stationary?

$(document).ready(function() { var score = 0; $("body").mousemove(function() { score++; $("#result").val(score); console.log(score); }); }); As I move my mouse, the score keeps increasing. But, I'm wonde ...

Utilize a variable function in AngularJS

Within my app.js file, I have declared functions in the following manner: var func1 = function(v1,v2,v3) { . . } var func2 = function(v1,v2,v3) { . . } Moving on to my controller.js file: var action = ""; if(..) { action = 'func1';} ...

Error in AngularJS ng-repeat syntax

As a newcomer to AngularJS, I ventured into creating a Bootstrap form with a loop but encountered an error. What could be the mistake I made? <form class="form-horizontal" role="form" name="newForm" novalidate ng-controller="newFormController"> < ...

What is the best way to retrieve a Rails variable that is restricted to a specific partial?

As a newcomer to Ruby on Rails, I find myself struggling to grasp the larger concept. Any assistance you can offer would be greatly appreciated. Within my application.html.haml file, I utilize =yield to pull content from ranked.html.haml. Currently, this ...

JavaScript Error Caused by Newline Characters

I'm facing an issue with extracting data from a textbox using JavaScript. What I'm attempting to do is retrieve the value from a textbox, display it in an alert, and then copy it. Here's the current code snippet: var copyString = "Date: < ...

rearranging the sequence of buttons using JavaScript

I am faced with the challenge of making a series of buttons draggable and droppable within a parent div without using any external libraries at the request of the client. Although I could have easily accomplished this task with jQuery, it's an opportu ...

Silly problem arising from the animate feature in jQuery

Apologies for my poor English. I am facing an issue with the animate function of jQuery in my code snippet. It seems to work fine at line 2, but it doesn't work at line 3. Can someone help me understand why? $('.opac').hover(function(){ ...

Converting rotation into a directional vector

I have a Three.js object and I am able to read its rotation. However, I am looking for a way to extract a vec3 that indicates the direction in which the object is currently rotated. Can someone provide guidance on how to achieve this? ...

Error: The `queries` property is undefined and cannot be read (react.js)

Here is the code snippet I am currently working with: import { useState } from 'react' import { QueryClientProvider, QueryClient } from 'react-query' import { ReactQueryDevtools } from 'react-query-devtools' import Navba ...

Can a package-lock.json file be created without running an npm install command?

Is there a way to create only a package-lock.json file without having to redo the npm install process? I'm looking to generate the lock file without reinstalling any of the package files. Is this achievable? ...

Error: "the cart variable in the ctx object has not been defined"

A project I'm currently working on involves a pizza ordering app, and my current focus is on implementing the Cart feature. Each user has their own cart, which includes specific details outlined in cart.ts import { CartItem } from './cartitem&a ...

The functionality of Webdriver.waitUntil is not meeting the expected outcomes

I'm currently utilizing webdriverio version 4.5: ./node_modules/.bin/wdio -v v4.5.2 In my scenario, I am in need of waiting for the existence of a specific element and handling the situation if it doesn't exist. Here is an example code snippet ...

The function successfully triggers when clicked using (React, JS, TS) but does not respond to key presses

When the function is called with "onClick", it works correctly, but when called with "onKeyPress", it does not execute an if statement. scenario Consider a scenario where you can search for food recipes (e.g. "pizza") and receive a list of recipes from a ...