Using Vue.js to group JSON arrays multiple times

Question

Using Vue.js to group JSON arrays multiple times

I have a program that I utilize to import a CSV data file and then convert it into JSON format.

The resulting JSON structure is as follows:

{
  "Class": "Cultivated Mushrooms",
  "Type": "Shii-take",
  "Grade": "Medium",
  "LvH": "SP",
  "Description": "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"
}

Output in the console log:

https://i.sstatic.net/X3Gg4.png

I need to group the data by Category > Type > Grade, but I am unsure how to achieve this using VUE/JS.

I can successfully group the data by individual fields like so

In the methods section:

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

Computed property:

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

This grouping operation is quite straightforward in SQL, demonstrated here on DBFiddle (the example includes all the JSON data).

The desired outcome should resemble https://i.sstatic.net/1cn3U.png

Despite thorough research and attempts, I came across this informative response. However, I am struggling to adapt this solution into VUE due to my limited knowledge of JavaScript. Any additional insight would be greatly appreciated.

javascript arrays vue.js

Answer 1

Answer №1

When working with multiple keys instead of a single key, you can obtain an array of keys. Then, create a unique key by combining the values corresponding to each of those keys with a | separator.

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 provided, the unique key would be as follows:

Gecultiveerde paddestoelen|Shii-take|Medium

Here is a snippet showcasing this logic:

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']))

Answer 2

When working with multiple keys instead of a single key, you can obtain an array of keys. Then, create a unique key by combining the values corresponding to each of those keys with a | separator.

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 provided, the unique key would be as follows:

Gecultiveerde paddestoelen|Shii-take|Medium

Here is a snippet showcasing this logic:

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']))

Using Vue.js to group JSON arrays multiple times

Answer №1

Similar questions

A method in JavaScript to fetch a single variable using the GET request

Building Unique Staircases with Three.js Geometry

Specify a character array pointer with a specific size

Utilizing the reduce() function to simultaneously assign values to two variables from data input

Rearrange the JSON response to make it compatible with the treeData structure needed for react-simple-tree-menu

Please provide a text file containing rows of numbers as input

Retrieve information using server-side rendering

Merge and organize two arrays of varying lengths. Subsequently, convert the elements to 0s and 1s in a C program

Build a row within an HTML table that is devoid of both an ID and a class

What is the best way to trigger a function when a chart changes in Nuxt using Vue JS?

What is the best method for removing extra spaces from an input field with type "text"?

What is the best way to prevent the onClick event from triggering during the page rendering process?

How to access a specific key in a JSON string using square brackets in PHP

Questions about setting up a controller in AngularJS

Data object constructor is not triggered during JSON parsing

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Tips for attaching a load event to an image

What causes the error message "Irregular whitespace not permitted" and what are the solutions?

Retrieve all rows in Excel array that do not contain errors

What is the method for specifying a specific sub-dependency version in a package in Node.js?