Группировка объектов в массиве по id и объединение полей

Question

Всем привет, не могу понять как поступить в такой ситуации, уже много чего перепробовал! Но что-то не клеится, решил спросить!

Данные приходят с бэка в такой виде!

У нас есть три масива где энного количество повторяющих элементов!

И некоторые элементы в массиве повторяются и мне их нужно бьеденять но - поле mealsCustomerMenuId всегда разны их нужно в массив запихнуть

На основании ключа в исходном массиве я создаю табы Где уже показываю все эти элементы, пока просто общим списком, без группирования)) Так как не получилось)

<div class="packaging-view__header">
      <h2>Production planning</h2>
      <div class="packaging-view__nav">
        <PackingViewElementTabs>
          <PackingViewElementTab
            v-for="(item, key) in currentMealsPackagingList"
            :key="key"
            :name="key"
          >
            <div class="packaging-view__body">
              <PackingViewElement
                v-for="(value, index) in item"
                :key="index"
                :item="value"
                @packing-heandler="packingHeandler"
              />
            </div>
          </PackingViewElementTab>
        </PackingViewElementTabs>
      </div>
    </div>

Вот компонент который рендерит табы И вот я не пойму, мутацию нужно писать в vuex или будет достаточно computed в самом компоненте

getCurrentMealsForPackaging({ commit }, payload) {
    return new Promise((resolve, reject) => {
      this.app.apolloProvider.defaultClient.cache.reset()
      this.app.apolloProvider.defaultClient
        .query({ query: GET_CURRENT_MEALS_FOR_PACKAGING, variables: payload })
        .then(({ data }) => {
          commit('set', { currentMealsPackagingList: data.getCurrnetMealsForPackaging })
          resolve(data)
        })
        .catch((error) => {
          reject(error)
        })
    })
  },

Вот такой action я использую для получения данных, и в сторе храню currentMealsPackagingList

Буду благодарен любым предложениям!)) Заранее спасибо!

Answer 1

В итоге вот так получилось сделать через reduce. это computed который мне объект группированный возвращает.

itemList() {
      return this.items.reduce((rv, item) => {
        const {
          name,
          status,
          setOrderNumber,
          orderNumber,
          mealsCustomerMenuId,
        } = item

        if (rv[name]) {
          rv[name].count += 1
          rv[name].status.push(status)
          rv[name].setOrderNumber.push(setOrderNumber)
          rv[name].orderNumber.push(orderNumber)
          rv[name].mealsCustomerMenuId.push(mealsCustomerMenuId)
        } else {
          rv[name] = {
            count: 1,
            status: [status],
            orderNumber: [orderNumber],
            setOrderNumber: [setOrderNumber],
            mealsCustomerMenuId: [mealsCustomerMenuId],
          }
        }
        return rv
      },{})
    },

БЛОГ НА HUSL

Группировка объектов в массиве по id и объединение полей

Ответы (1 шт):