Utilizing VUEJS 3 to incorporate lists into firebase

I have a collection of items called 'order' that I want to store in my cloud firestore database.

order: [
        {
     
          product: 'Coffee',
          productivity: '20',
          quantity: '8',
        },
        {
          
          product: 'Snacks',
          productivity: '10',
          quantity: '5',
        },
      ],

Previously, my application only allowed adding a single product at a time, and the function worked well (based on pinia store).

    async addOrder(clientId, newProduct, newProductivity, newQuantity) {
      const storeAuthentication = useStoreAuth()

      await addDoc(collection(db, 'users', storeAuthentication.user.id, 'clients', clientId, 'orders'), {
        
        product: newProduct,
        productivity: newProductivity,
        quantity: newQuantity,
        productionTime: newQuantity / newProductivity
   
            
      })
  
    },

Now, I need to add multiple products simultaneously. Currently, I am storing the data locally. Essentially, it functions as a simple shopping cart, but I haven't found a suitable solution that fits my requirements.

Below is the code where I invoke the addOrder function in my component.

  const addOrders = () => {

    storeOrders.addOrder(newOrderName.value, newOrderProduct.value, newOrderProductivity.value, newOrderQuantity.value)
    
    newOrderProduct.value
    newOrderProductivity.value = ''
    newOrderQuantity.value = ''



  }

Answer №1

If this method suits your needs, you can modify it to fit your code. When adding multiple products simultaneously, you will need to create a map and convert it asynchronously. This way, each article will have its own unique identification.

const order =  [
  {

    product: 'Coffee',
    productivity: '10',
    quantity: '20',
  },
  {
    
    product: 'Vegetables',
    productivity: '20',
    quantity: '15',
  },
];

order.map(async(item)=> {
  await addDoc(collection(db, 'users', storeAuth.user.id, 'clients', clientsid, 'orders'), {
    product: item.product,
    productivity: item.productivity,
    quantity: item.quantity,
    productionTime: item.quantity / item.productivity
  })
})

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

Error in React-router: Unable to assign value to the 'props' property as it is undefined

Currently, I am working on setting up routing with Meteor using the react-router package. However, I have encountered a specific TypeError: Here is a link to an image that provides more context: This is the code snippet from my main.js file: import Reac ...

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

The presence of a .js file is causing a blockage in the loading

As a beginner in the world of jquery/web design, I decided to download a template to experiment and get more familiar with it. Unfortunately, I encountered an issue with a specific script that is causing my jQuery to not load properly. Here is the snippet ...

When trying to create a MongoStore object, an error occurred because the property 'create' was not defined

I have exhausted all possible solutions I could find, but the issue remains unresolved. The error message is as follows: C:\Users\...............\server.js:35 store: MongoStore.create({ ^ TypeError: Cannot read property &a ...

"Excessive use of Javascript setInterval combined with frequent ajax calls is causing significant

I have integrated the setInterval() function into my JavaScript code to make an AJAX call every 2 minutes. However, I noticed that this is causing the website to slow down over time. The website is built using Node.js. After doing some research, I came acr ...

Analyzing and inserting elements into an array of objects

The following code aims to: 1) iterate through the two arrays, 2) if an item exists in both arrays, add its value to the value of the matching item in the first array, 3) if the item is found in arr2 but not in arr1, add the item to arr1. The code funct ...

What causes the error message 'avoid pushing route with duplicate key' when using NavigationStateUtils in React Native?

Within my React Native + Redux project, I have set up a reducer for navigation utilizing NavigationStateUtils: import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' import { NavigationExperimental } from 'react-native' impo ...

When attempting to utilize VueJs v-bind:type on an input element, it appears to be ineffective when the type property name is

Code: <!DOCTYPE html> <html> <head> <title>Creating a Vue app</title> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570021e061e0100">[ ...

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

Sinon - observing the constructor function

While I've come across a few related inquiries, none seem to address what I am specifically looking to achieve. My goal is to monitor a constructor method in such a way that when an object created with the constructor calls this method from a differe ...

The integration of RxJS into a Master/Worker workflow

My current program utilizing the cluster library is structured like this: if(cluster.isMaster) { // include Rx subscriptions and workflows for the Master here } else if (cluster.isWorker){ // include Rx subscriptions and workflows for a Worker here } ...

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...

Troubleshooting: Issue with multiple file input elements on page - only the first input is functional and not displaying preview images

Having some trouble with loading multiple file inputs and their preview images. I've tried using getElementsByClassName but I suspect that I'm not iterating over them correctly. I want to avoid using unique IDs for the elements because they will ...

Utilizing async await allows for the sequential processing of one item at a time within a For loop

Async await has me stumped, especially when it comes to processing items in an array with a 1 second delay: handleArrayProcessing() { clearTimeout(this.timer); this.timer = setTimeout(() => { for (const ...

Dealing with 'this' while using an addEventListener

I need to trigger the function handleRangeUpdate in a way that it responds to the event calling it and decides whether to run console.log(this.value). The problem arises when I pass e into handleRangeUpdate using addEventListener, causing the value of thi ...

How to transfer data from a component to an external JavaScript file?

I'm facing a challenge with using my component's data in an external JavaScript file that contains my Dropzone configuration. I attempted to use Function.prototype.bind without success: export const dropzoneConfig = { url: api.http.baseUrl + ...

Tips for enabling JSON access to the content inside a textarea element in HTML:

I'm attempting to develop a button that enables users to save edits to a post they write in a textarea using JSON. However, when attempting to save the data with a PUT request, I encounter the following error: raise JSONDecodeError("Expecting val ...

What is the recommended approach for utilizing props versus global state within your components when working with JS Frameworks such as Vue?

Currently, I am delving into a larger project using Vue and I find myself contemplating the best practices when it comes to utilizing props versus global Vuex states for accessing data within a component. To elaborate, let's say I have a component re ...

What is the best method in Selenium IDE for tracking an element based on its value?

While testing a website with Selenium IDE, I encountered an issue with the way elements are identified. The site utilizes something called "wickets" that change the ID of elements randomly, making it difficult for Selenium to record actions on certain elem ...

Tips on working with an array received from a PHP script through AJAX

I've been stuck with this issue for the past few hours and I'm hoping to find a solution here. What I'm attempting to do is something like the following: PHP: $errorIds = array(); if(error happens){ array_push($errorIds, $user['user ...