Vue.js JSON grouping array multiple times

Question

I have an application that I use to import a CSV file which then converts it to JSON.

The JSON output looks like this

{
  "Class": "Gecultiveerde paddestoelen",
  "Soort": "Shii-take",
  "Sortering": "Medium",
  "LvH": "SP",
  "Omschrijving": "SHIITAKE MEDIM STEMLESS unclosed",
  "Trade unit composition": "8 x 150gr",
  "Punnet type": "CARTON",
  "CONTAINER BOX": "Multicrate (30x40x11)",
  "Price (/box)": "10",
  "Amount (container box) per Pallet / Europallet \r": "200 / 160\r"
}

Console log output

I need to groupBy on Class > Soort > Sortering which I don't know how to do in VUE/JS.

I am able to groupBy single colls like this

In the methods:

groupBy: function (array, key){
  const result = {};
   array.forEach(item => {
    if (!result[item[key]]){
      result[item[key]] = []
    }
    result[item[key]].push(item)
   });
  return result
},

Computed:

groups() {
  return this.groupBy(this.parse_csv, 'Class');
},

In SQL this is very easy to do like this DBFiddle (the dbfiddle has all of the JSON data in it)

The expected output would be like

After obviously doing my fair share of googling and researching I have stumbled upon this answer. However I am not able to get this working in VUE as this is plain JS, this most likely is a mistake on my behalf for not being very familiar with js, but I would love some extra take on this.

you want to sort or group? the question is aking for grouping but the answer link you have added is for sorting. plaese, add an example with input and expected output as well. — AZ_, Aug 16 '19 at 09:59
@AZ_ I want to groupBy, I have added an input with what I am able to do (which is a single groupBy). As for the output, I have tried my best to make clear how id like my data. — Tomm, Aug 16 '19 at 10:09

adiga · Accepted Answer · 2019-08-16T10:21:55.350

Instead of using a single key as parameter, you can get array of keys. Then create a unique key based on the values for each of those keys separated by a |.

groupBy: function(array, keys){
  const result = {};
   array.forEach(item => {
    // get an array of values and join them with | separator
    const key = keys.map(k => item[k]).join('|');
    // use that unique key in result
    if (!result[key]){
      result[key] = []
    }
    result[key].push(item)
   });
  return result
}

For the object you've posted, the unique key would look like this:

Gecultiveerde paddestoelen|Shii-take|Medium

Here's a snippet:

function groupBy (array, keys){
  const result = {};
   array.forEach(item => {
    const key = keys.map(k => item[k]).join('|');
    if (!result[key]){
      result[key] = []
    }
    result[key].push(item)
   });
  return result
}

const input=[{Class:"Gecultiveerde paddestoelen",Soort:"Shii-take",Sortering:"Medium",LvH:"SP",Omschrijving:"SHIITAKE MEDIM STEMLESS unclosed","Trade unit composition":"8 x 150gr","Punnet type":"CARTON","CONTAINER BOX":"Multicrate (30x40x11)","Price (/box)":"10","Amount (container box) per Pallet / Europallet \r":"200 / 160\r"}];

console.log(groupBy(input, ['Class', 'Soort', 'Sortering']))

Vue.js JSON grouping array multiple times

1 Answers1