Adding Firebase data into an array using JavaScript and Vue.js

I am working with a firebase firestore Collection called users, which consists of unique ID documents.

My goal now is to add these users into an Array.

(The usersCollection currently has 3 users stored with the currentUser.uid)

Example:

fb.usersCollection.where("state", "==", 'online').get().then(querySnapshot => {
      querySnapshot.forEach((doc) => {
         const userName = doc.data().name

 this.markerMy = { name: userName }
})

// adding userName to randomArray
const randomArray = []
randomArray.push(this.markerMy)

Currently, I can only figure out how to push one user into the Array, not multiple.

Answer №1

It is recommended to define the randomArray array variable before accessing fb.usersCollection. Then, make sure to perform the push operation inside the callback function as shown below:

const randomArray = []
fb.usersCollection.where("state", "==", 'online').get().then(querySnapshot => {
      querySnapshot.forEach((doc) => {
        const userName = doc.data().name

        this.markerMy = {
          name: userName
        }

        randomArray.push(this.markerMy)
      })
   });

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

performing regular expression replacements in Node.js

In my Node.js code, I have the following string: var textToReplace = "Your <b class =\"b_1\">1</b> payment due is $4000.Your <b class =\"b_1\">2</b> payment due is $3500. Your <b class =\"b_1\"> ...

What is the reason behind the absence of hoisting in C#?

Every day, I work with both Javascript and C#. One thing that I often have to take into consideration when working with Javascript is hoisting. However, it seems that C# does not implement hoisting (as far as I know), and I can't seem to understand wh ...

Dealing with memory leaks in three.js can be a common issue, especially when utilizing the

In my three.js project, I am constructing a Geometry and filling it with vertices to create a 2D terrain. Once the terrain is generated, I am adding all the Vector3 and Face3 elements to the geometry, and then adjusting each vertex and face on every frame ...

There is a bug that I have encountered specifically on RN version 0.74

Everything was running smoothly in RN 0.73.7, but encountered an issue on Android when upgrading to RN 74 with the following error message: Error: Failed to create a new MMKV instance: React Native is not running on-device. MMKV can only be used when syn ...

Tips on preserving type safety after compiling TypeScript to JavaScript

TS code : function myFunction(value:number) { console.log(value); } JS code, post-compilation: function myFunction(value) { console.log(value); } Are there methods to uphold type safety even after the conversion from TypeScript to JavaScript? ...

Bolt has outsmarted Firebase and gone undetected

Latest Update: It appears that the issue was resolved sometime between firebase-tools 3.0.6 and 3.2.0 Lately, when running firebase deploy, it seems to be failing because it is unable to recognize Bolt as installed. Even though Bolt is installed both glob ...

In order to delete a post within a Node.js application, you must double-click the delete button

Previously, a nodejs application was utilizing custom js confirms. I decided to replace those with confirms from Bootblox.js. When the delete post button is pressed, it prompts for confirmation, but does not remove the post immediately. It requires pressi ...

What is the best approach to implement a gradual loading of data in a FlatList in React Native

I am facing an issue with my flatlist where the renderItem function does not render data properly from my custom backend when the internet connection is slow or if I reload too many times. This results in either the data not appearing on the screen or the ...

Steps to isolate the "changed" values from two JSON objects

Here is a unique question that involves comparing JSON structures and extracting the differences. A JqTree has been created, where when the user changes its tree structure, both the "old" JSON and "new" JSON structures need to be compared. Only the values ...

Showing time on a JSON document using JavaScript Timeline

Currently, I am in the process of creating a widget using a timeline JS template. The main challenge lies in receiving events in JSON format, which is essential for the functionality of the widget. At this stage, my focus is on being able to fetch events f ...

Update password after initial login success

In the process of developing a web application with existing Auth features in Django, I have encountered a need for enhanced security measures. The system involves an admin creating user profiles with usernames and passwords, which are then provided to use ...

Is there an equivalent of numpy.random.choice in JavaScript?

The Numpy.random.choice function is a handy tool that allows you to select a sample of integers based on a specific probability distribution: >>> np.random.choice(5, 3, p=[0.1, 0, 0.3, 0.6, 0]) array([3, 3, 0]) Is there a similar feature in Java ...

Tips for placing a marker at the center of the screen on Google Maps

I am developing a transportation app similar to Uber or Lyft using JavaScript. I am looking to retrieve the map location with the center of the screen, where there is a marker located at y = 0 and x = 0. Similar to the image below: The user should be abl ...

Is it possible to use a hashtag and exclamation mark in URLs as a folder designation?

Can anyone guide me on how to make my pages look similar to the ones on Grooveshark, like this example: ? I'm looking for a tutorial or resources on implementing this layout using jQuery or JavaScript. ...

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

Encountering a persistent error: Error Code: TS5055 Cannot write file C:/project/dir/server.js' because it would overwrite the input file. Project: TypeScript/JavaScript Virtual Projects Even after renaming my entry filename to nodeserver.js, the ...

I keep getting an error message that says "The JSX element type does not have any construct or call signatures."

I am currently developing an application that takes user input through buttons and creates an array. However, when I attempt to display the array, I encounter a JSX element type error. import { Delete } from "lucide-react" export function Passwo ...

Unable to retrieve the API key in Nuxt framework

I am fairly new to NuxtJS and have been following tutorials on it. I am having trouble displaying the {{planet.title}} on my page. However, when I use {{$data}}, I can see all the planets. I want the title of the planet's name that I have in the slug ...

Attain worldwide reach

I'm currently facing a Scope issue that has been quite challenging to resolve. The saying goes, "a picture is worth a thousand words," and in this case, it couldn't be more true. Whenever the OK or REJ buttons trigger the reject() function, passi ...

NoUIslider - Dynamically adjust range as needed

I have a unique challenge with two sliders on my page. What I would like to achieve is updating the range of one slider based on the movement of the other. For example, let's say slider_1 and slider_2 both have a range of 1-10 initially. When I move ...

sketch a portion of a picture on a canvas

My challenge involves a canvas with dimensions of 400 by 400, and an image sized at 3392 by 232. I am looking to crop the first 400 pixels of this image and display them within the canvas. How can I achieve this task? $(document).ready(function () { v ...