Merge two arrays into one unique array by using Pinia store VUEJS

Question

I am trying to merge two arrays 'orders' and 'products' and creating third array merged. Each 'Orders' array contains value of 'shared' which represents 'products id', that's how I am filtering and merging them together since I have many arrays. If I run locally function of merging two arrays it works but I am strugling to make this function as action in Pinia store and create this third array 'merged' and then use it globally. I use vuejs 3 with pinia and the data comes from firebase. In code Example in array merged is my desired result.

import { defineStore } from 'pinia'
import { collection, onSnapshot, doc, updateDoc, deleteDoc, addDoc, collectionGroup, query, where } from "firebase/firestore"
import { db } from '@/firebase/firebase'
import { useStoreAuth } from '@/store/storeAuth'

export const useStoreOrders = defineStore('storeOrders', {
  state: () => {
    return { 
      orders: [
         {
           id: 'id1',
           name: 'Smith',
           address: 'something'
           shared: 'id1'
         },
         {
           id: 'id2',
           name: 'Apple',
           address: 'good'
           shared: 'id2'
         }
      ],
      products: [
                 {
           id: 'id1',
           product: 'Lorem ipsum dolor saxime.',
           productivity: 3,


         },
         {
           id: 'id2',
           product: 'Woo!',
           productivity: 2,

         }
      ],

      ],
      merged: [
 {
           id: 'id1',
           name: 'Smith',
           address: 'something',
           product: 'Lorem ipsum dolor saxime.',
           productivity: 3,
           shared: 'id1'
         },
         {
           id: 'id2',
           name: 'Apple',
           address: 'good',
           product: 'Woo!',
           productivity: 2,
           shared: 'id2'
         }

      ],

    }
  },
  actions: {

and this is the function which works when I use it locally:

<script setup>

import { useStoreOrders } from '@/store/storeOrders'
import { ref } from 'vue'
  const storeOrders = useStoreOrders()
let merged = [];

for(let i=0; i<storeOrders.orders.length; i++) {
   merged.push({
    ...storeOrders.orders[i], 
    ...(storeOrders.products.find((itmInner) => itmInner.id === storeOrders.orders[i].shared))}
   );
 }

Pierre_T · Accepted Answer · 2022-08-24 10:54:01Z

1

You can declare either a action or a getter to achieve this.

import { defineStore } from 'pinia'

interface State {
  orders: any[]
  products: any[]
  mergedOrders: any[]
}

export const useOrdersStore = defineStore('orders', {
  state: (): State => {
    return {
      orders: [
        {
          id: 'id1',
          name: 'Smith',
          address: 'something',
          shared: 'id1',
        },
        {
          id: 'id2',
          name: 'Apple',
          address: 'good',
          shared: 'id2',
        },
      ],
      products: [
        { id: 'id1', product: 'Lorem ipsum dolor saxime.', productivity: 3 },
        {
          id: 'id2',
          product: 'Woo!',
          productivity: 2,
        },
      ],
      mergedOrders: [],
    }
  },

  actions: {
    mergeOrders() {
      this.mergedOrders = this.orders.map((order) => {
        const product = this.products.find((p) => p.id === order.shared)
        return product ? { ...order, ...product } : order
      })
    },
  },
  // You could also chose use a getter to return the merged orders
  getters: {
    merged(state: State): any {
      return state.orders.map((order) => {
        const product = state.products.find((p) => p.id === order.shared)
        return product ? { ...order, ...product } : order
      })
    },
  },
})

In your component just instantiate the store and call your action :

const ordersStore = useOrdersStore()
ordersStore.mergeOrders()

answered Aug 24, 2022 at 10:54

Pierre_T

1,3321 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BeEmil Over a year ago

Thanks, this works. But it seems that this Action must be called, only then I can retrieve data? Because if I declare getter where I get array based on specific ID it doesn't give me anything since Action is not called?

Pierre_T Over a year ago

I am not sure how you get your data but let's assume you have another action to do so called fetchData : - in the first option you call fetchData (ie. in your component) to get orders & products. You can then call your mergeOrders action inside, at the end offetchData action - in the second case, you dont need to do anything else than calling fetchData as the getter will automagically bu updated when the state change

BeEmil Over a year ago

In my case I have two actions in Pinia store which calls getOrders and getProducts. You mean in my component I have to also call for ordersStore.getOrders(), ordersStore.getProducts() and storeOrders.mergeOrders(). At least this works for me and I am able to use my getter where I get data when unique ID is met.

Collectives™ on Stack Overflow

Merge two arrays into one unique array by using Pinia store VUEJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related