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

Question

Я работаю над сайтом электронной коммерции.Я должен управлять изменениями продукта.Ответ REST API выглядит примерно так:

"variations": [
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "L"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "XXL"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "Azul"
      },
      {
        "name": "Talle",
        "valueName": "M"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "S"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "XL"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "Azul"
      },
      {
        "name": "Talle",
        "valueName": "S"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "M"
      }
    ]
  }
]

Этот JSON неэффективен для меня, чтобы работать на веб-интерфейсе.Сложно сгруппировать варианты по их типу (имени) и значениям (valueName), поскольку они находятся в разных «массивах массивов».

Окончательный результат должен выглядеть примерно так:

variations: [
  {
    name: 'Color',
    values: ['Gris', 'Azul']
  },
  {
    name: 'Talle',
    values: ['S', 'M', 'L', 'XL', 'XXL']
  }
]

Пока я достиг этого результата:

[
  { name: "Color", values: ["GRIS"] },
  { name: "Talle", values: ["L"] },
  { name: "Color", values: ["GRIS"] },
  { name: "Talle", values: ["XXL"] },
  { name: "Color", values: ["Azul"] },
  { name: "Talle", values: ["M"] },
  { name: "Color", values: ["GRIS"] },
  { name: "Talle", values: ["S"] },
  { name: "Color", values: ["GRIS"] },
  { name: "Talle", values: ["XL"] },
  { name: "Color", values: ["Azul"] },
  { name: "Talle", values: ["S"] },
  { name: "Color", values: ["GRIS"] },
  { name: "Talle", values: ["M"] }
]

На основе этого кода:

let variations = this.$page.product.variations;
let newArr = [];

variations.forEach(variation => {
        newArr.push(
          Object.values(
            variation.attributeCombinations.reduce(
              (result, { name, valueName }) => {
                // Create new group
                if (!result[name]) {
                  result[name] = {
                    name,
                    values: []
                  };
                }
                // Append to group
                result[name].values.push(valueName);

                return result;
              },
              {}
            )
          )
        );
      });
return newArr.reduce((acc, cur) => acc.concat(cur));

Answer 1

Вы можете использовать функцию reduce для группировки и функцию Object.values для извлечения значений.

Объект Set предоставляет способ удалить повторяющиеся значения.

let variations = [   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "GRIS"       },       {         "name": "Talle",         "valueName": "L"       }     ]   },   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "GRIS"       },       {         "name": "Talle",         "valueName": "XXL"       }     ]   },   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "Azul"       },       {         "name": "Talle",         "valueName": "M"       }     ]   },   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "GRIS"       },       {         "name": "Talle",         "valueName": "S"       }     ]   },   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "GRIS"       },       {         "name": "Talle",         "valueName": "XL"       }     ]   },   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "Azul"       },       {         "name": "Talle",         "valueName": "S"       }     ]   },   {     "attributeCombinations": [       {         "name": "Color",         "valueName": "GRIS"       },       {         "name": "Talle",         "valueName": "M"       }     ]   } ];
let result = Object.values(variations.reduce((a, {attributeCombinations: combinations}) => {
  combinations.forEach(({name, valueName}) => {
    (a[name] || (a[name] = {name, values: new Set()})).values.add(valueName);
  });
  
  return a;
}, {}));

console.log(Array.from(result[0].values));// for understanding the object set
console.log(result);

.as-console-wrapper { min-height: 100%; }

Answer 2

Чтобы достичь ожидаемого результата, используйте нижеприведенную опцию использования Reduce, forEach и индексации каждого цикла

1. Цикл по массиву вариаций
2. Для первого индекса в позиции 0 нажмите на Аккумулятор(acc)
3. Использование второго цикла с использованием .forEach для циклического перебора атрибутовCombination
4. Передача valueNames в соответствующие имена - Color and Talle

var arr = {"variations": [
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "L"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "XXL"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "Azul"
      },
      {
        "name": "Talle",
        "valueName": "M"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "S"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "XL"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "Azul"
      },
      {
        "name": "Talle",
        "valueName": "S"
      }
    ]
  },
  {
    "attributeCombinations": [
      {
        "name": "Color",
        "valueName": "GRIS"
      },
      {
        "name": "Talle",
        "valueName": "M"
      }
    ]
  }
]
          }


console.log(arr.variations.reduce((acc, val, idx) => {
  val.attributeCombinations.forEach((v, i) => {
  if(idx === 0) {
    acc.push({name: v.name , valueName:  Array.of(v.valueName)})
  }else{
    i === 0 ? acc[0].valueName.push(v.valueName) : acc[1].valueName.push(v.valueName) 
  }
})
  return acc
},[]).map(v => v = {name :v.name,  valueName: [...new Set(v.valueName)]}));

codepen - https://codepen.io/nagasai/pen/ZZxVzp?editors=1010

Answer 3

Вы можете использовать reduce для циклического перебора массива и суммирования в объект. Используйте forEach для цикла attributeCombinations и создания желаемого результата. Используйте Object.values для преобразования объекта в массив.

var variations = [{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"L"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"XXL"}]},{"attributeCombinations":[{"name":"Color","valueName":"Azul"},{"name":"Talle","valueName":"M"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"S"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"XL"}]},{"attributeCombinations":[{"name":"Color","valueName":"Azul"},{"name":"Talle","valueName":"S"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"M"}]}];

var result = Object.values(variations.reduce((c, v) => {
  v.attributeCombinations.forEach(({name,valueName}) => {
    c[name] = c[name] || {name,values: []}
    c[name].values.push(valueName);
  });
  return c;
}, {}));

console.log(result);

---

Если вам нужны уникальные значения, вы можете использовать Set и добавить еще один цикл для преобразования объекта Set в массив.

var variations = [{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"L"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"XXL"}]},{"attributeCombinations":[{"name":"Color","valueName":"Azul"},{"name":"Talle","valueName":"M"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"S"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"XL"}]},{"attributeCombinations":[{"name":"Color","valueName":"Azul"},{"name":"Talle","valueName":"S"}]},{"attributeCombinations":[{"name":"Color","valueName":"GRIS"},{"name":"Talle","valueName":"M"}]}]

var result = Object.values(variations.reduce((c, v) => {
  v.attributeCombinations.forEach(({name,valueName}) => {
    c[name] = c[name] || {name,values: new Set}
    c[name].values.add(valueName);
  });
  return c;
}, {})).map(o => {
  o.values = [...o.values.values()]
  return o;
});

console.log(result);