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:

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

The JavaScript in the Laravel file isn't functioning properly, but it works perfectly when incorporated via CDN

Successfully implemented code: <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> <script type="text/javascript"> var textWrapper = document.querySelector('.ml6 .letters'); textWrapper.in ...

Adjust the font weight to bold for specific sections of the option value within a reactjs component

I have a component that generates a dropdown menu. I want to apply bold formatting to certain text within the dropdown values. Specifically, I need to make the ${dataIdText} text appear in bold within the dropdown menu. Here is a snippet of my code: < ...

Sorry, but React does not accept objects as valid children. Make sure the content you are passing is a valid React child element

I encountered an issue with rendering on a screen that involves receiving an object. The error message I received is as follows: Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection o ...

Formatting HTTP HTML response in Vue.js can be achieved by utilizing various methods and techniques

I have a WordPress site and I'm trying to fetch a specific post by its ID. Currently, the content is being displayed successfully, but it's also showing HTML tags in the main output. Here is an example: https://i.stack.imgur.com/f3pdq.png Code ...

I am having trouble unzipping the file

I encountered an issue while attempting to download a .zip file from Discord and extracting it using the decompress package. Despite not returning any errors, the package did not get extracted as expected. (The file was saved and downloaded correctly) co ...

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

JavaScript method to clear a variable

Can JavaScript prototype be used to add a method to a variable that is undefined? For instance, we can use the following code: var foo = "bar"; String.prototype.doTheFoo = function(){ console.log("foo is better than you"); }; foo.doTheFoo(); This c ...

Identifying Changes with jQuery Event Listeners

I am trying to run some javascript code that is in the "onchange" attribute of an HTML element. For example: <input id="el" type="text" onchange="alert('test');" value="" /> Instead of using the onchange attribute, I want to trigger the e ...

Leveraging the power of Express.js, transmit local data alongside a

Why can't I display the active user in my view using plain HTML when console log shows it? Here is the code snippet: app.post('/', function (req, res) { var user = { user : req.body.username }; res.render('doctor_hagfish/pets&ap ...

What are some solutions for troubleshooting a laptop freeze when running JavaScript yarn tests?

Running the yarn test command results in all 20 CPU cores being fully occupied by Node.js, causing my laptop to freeze up. This issue is particularly troubling as many NodeJS/Electron apps such as Skype, MS Teams, and Slack are killed by the operating syst ...

Having trouble with Grunt and Autoprefixer integration not functioning properly

Joining a non-profit open source project, I wanted to contribute by helping out, but I'm struggling with Grunt configuration. Despite my research, I can't seem to figure out why it's not working. I am trying to integrate a plugin that allow ...

Array of Ascending Progress Indicators

I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected: https://i.stack.imgur.com/Pw9AH.png & ...

React's `setState` function seems to be failing to hold onto

Recently, I've been challenged with creating an infinite scroll loader component. However, I'm facing a peculiar issue where my 'items' array is constantly resetting to [] (empty) instead of appending the new results as intended. A cou ...

I seem to be overlooking something. The calculation is not displaying in the designated field

Having trouble with my area calculator - the area field is not updating as expected when I enter numbers in each field. Any advice on what might be missing? function calculateArea() { var form = document.getElementById("calc"); var sLength = parseFl ...

Loop through an array that holds another array in javascript

After making a post request, I am receiving the following object: "{\"Success\":false,\"Errors\":{\"Name\":[\"The Name field is required.\"],\"Id\":[&b ...

Refresh selected items after inserting data via ajax in CodeIgniter

I have a select list on my view that allows users to add new items using a plus button. However, when a new item is added, the list does not refresh. I don't want to refresh the entire page with an ajax query. Instead, I am trying to implement a metho ...

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

I am using the Google Charts JS library on a single page within my project, with external and global headers and footers. The head tags are located in a head.php file, where all required JS libraries are included. The structure of my pages is as follows: ...

Display the number of items that have been filtered as soon as the Mixitup page loads

Currently, I am utilizing MixItUp 3 for sorting and filtering items, with the goal of displaying the count of items within each filter category upon the initial page load. Despite attempting a solution found on SO (mixitup counting visible items on initial ...

Is it possible to call a ref from a different component in React?

I'm currently working on a React chat application and I want the input field where messages are entered to be focused every time you click on the chat box. However, the challenge I'm facing is that the chat box in the main component is separate ...