Group array items by similar keys in javascript

Question

The initial array I have is pulled from a spreadsheet api so it comes like rows, looking like that

example : Array [
  Object {
    "brand": "Dell",
    "model": "Precision",
  },
  Object {
    "brand": "Apple",
    "model": "iMac Pro",
  },
  Object {
    "brand": "Apple",
    "model": "MacBook Pro",
  },
  Object {
    "brand": "HP",
    "model": "Z840",
  },
  Object {
    "brand": "Apple",
    "model": "MacBook Pro",
  },
  Object {
    "brand": "Apple",
    "model": "iMac",
  },
]

My goal is to convert it like the example below so I can use the data on cascading dropdowns

const data = [
  { brand: 'Brand A', models: [ 'model a1', 'model a2', 'model a3' ] },
  { brand: 'Brand B', models: [ 'model b1', 'model b2', 'model b3' ] },
  { brand: 'Brand C', models: [ 'model c1', 'model c2', 'model c3' ] },
  { brand: 'Brand D', models: [ 'model d1', 'model d2', 'model d3' ] },
];

Initially I don't know the brands and models so the list generated without any input from me, the logic I have implemented is ok except the last line, I couldn't figure out how to push the data in the specific way I demonstrated

console.log("example :", example);
var output = [];
var brands = example
  .map((value) => value.brand)
  .filter((value, index, _arr) => _arr.indexOf(value) == index);
console.log("brands :", brands);
for (let x in example) {
  for (let y in brands) {
    console.log(brands[y]);
    if (brands[y] === example[x].brand) {
      output.push({
        brands[y] : example[x].model
        // error let y: string (not working)
      })
    }
  }
}

Does this answer your question? [Group array items using object](https://stackoverflow.com/questions/31688459/group-array-items-using-object) — Heretic Monkey, Oct 20 '20 at 19:48

score 3 · Accepted Answer · answered Oct 20 '20 at 19:46

Using Array.prototype.reduce, you can group the array by brand value key and based on that, you can get the result.

const input = [{
    "brand": "Dell",
    "model": "Precision",
  },
  {
    "brand": "Apple",
    "model": "iMac Pro",
  },
  {
    "brand": "Apple",
    "model": "MacBook Pro",
  },
  {
    "brand": "HP",
    "model": "Z840",
  },
  {
    "brand": "Apple",
    "model": "MacBook Pro",
  },
  {
    "brand": "Apple",
    "model": "iMac",
  },
];

const groupedBy = input.reduce((acc, cur) => {
  acc[cur.brand] ? acc[cur.brand]['models'].push(cur.model) : acc[cur.brand] = {
    brand: cur.brand,
    models: [ cur.model ]
  };
  return acc;
}, {});

const result = Object.values(groupedBy);
console.log(result);

score 0 · Answer 2 · answered Oct 20 '20 at 20:01

let data = [
  {
    brand: "Dell",
    model: "Precision",
  },
  {
    brand: "Apple",
    model: "iMac Pro",
  },
  {
    brand: "Apple",
    model: "MacBook Pro",
  },
  {
    brand: "HP",
    model: "Z840",
  },
  {
    brand: "Apple",
    model: "MacBook Pro",
  },
  {
    brand: "Apple",
    model: "iMac",
  },
];

let ret = {};
data.forEach((x) => {
  if (!ret[x.brand]) {
    ret[x.brand] = [x.model];
  } else {
    ret[x.brand] = ret[x.brand].concat(x.model);
  }
});

let ret2 = [];
for (x in ret) {
  ret2.push({ brand: x, models: ret[x] });
}
console.log(ret2);

Group array items by similar keys in javascript

2 Answers2