Create sub-arrays depending on object values (Two groupings for two objects)

Question

I have an array of objects (dictionary is the term in Python but in this case I am using Javascript). What I am trying to do is to group everything in different objects. My first attempt is to create two arrays based on the Inventory values. Then for each of the two arrays, I want to create three different arrays based on the Objective values.

I think I have lost the logic as it doesn't work for the second grouping (Objective).

var inventory = [
    {ID: "K111", Objective: "One", Inventory: "Second" },
    {ID: "K112", Objective: "Two", Inventory: "Second" },
    {ID: "K113", Objective: "One", Inventory: "Second" },
    {ID: "K114", Objective: "Three", Inventory: "Second" },    
    {ID: "K132", Objective: "One", Inventory: "First" }
];

var OBJECTIVE = ["One", "Two", "Three"];
var INVENTORY = ["Second", "First"];

//Create arrays per Inventory (2 possible values)
for (var i = 0; i < INVENTORY.length; i++) {
 
  var variable = inventory.filter(function(el) {
      return el.Inventory == INVENTORY[i];
  });
  
  window['arr'+i] = variable;
  document.getElementById("arr"+i).innerHTML =JSON.stringify(variable);

}

//Create arrays per Objective for each array created above
for (var i = 0; i < OBJECTIVE.length; i++) {

  j = i + 2;
  var variable = arr0.filter(function(el) {
      return el.Objective == OBJECTIVE[i];
  });
  
  window['arr'+j] = JSON.stringify(variable);
  document.getElementById("arr"+j).innerHTML =JSON.stringify(variable);

}


for (var i = 0; i < OBJECTIVE.length; i++) {

  var variable = arr1.filter(function(el) {
      return el.Objective == OBJECTIVE[i];
  });
  
  window['arr'+j] = JSON.stringify(variable);
  document.getElementById("arr"+j).innerHTML =JSON.stringify(variable);

}

<div style="background:yellow;" id="arr0"></div>
<div style="background:green;" id="arr1"></div>
<div style="background:grey;" id="arr2"></div>
<div style="background:blue; color:white;" id="arr3"></div>
<div style="background:red; color:white;" id="arr4"></div>
<div style="background:black; color:white;" id="arr5"></div>
<div style="background:orange;" id="arr6"></div>

 

Answer 1

You could instead return one object using reduce method where you group first by Inventory and then by Objective. To return array of arrays as a result you can use Object.values with map.

var data = [{ID: "K111", Objective: "One", Inventory: "Second" },{ID: "K112", Objective: "Two", Inventory: "Second" },{ID: "K113", Objective: "One", Inventory: "Second" },{ID: "K114", Objective: "Three", Inventory: "Second" },    {ID: "K132", Objective: "One", Inventory: "First" }];

var res = data.reduce((r, e) => {
  let {Objective, Inventory} = e;
  r[Inventory] = r[Inventory] || {}
  r[Inventory][Objective] = r[Inventory][Objective] || {}
  Object.assign(r[Inventory][Objective], e);
  return r;
}, {})

var array = Object.values(res).map(Object.values)

console.log(array)
console.log(res)