Organize objects in an array as an array of arrays in JavaScript

Question

Organize objects in an array as an array of arrays in JavaScript

I'm attempting to organize a collection of objects into an array of arrays based on the 'group' key in the objects.

Current array:

array =
[
    [{name:’a’,age:’4’,group:’15’},{name:’b’,age:’4’,group:’15’}, 
     {name:’c’,age:’4’,group:’15’}],
    [{name:’aa’,age:’6’,group:’12’},{name:’bb’,age:’6’,group:’12’}],
    [{name:’d’,age:’5’,group:’15’},{name:’e’,age:’5’,group:’15’}, 
     {name:’f’,age:’5’,group:’15’}],
    [{name:’dd’,age:’7’,group:’12’}, 
     {name:’ee’,age:’7’,group:’12’{name:’ff’,age:’7’,group:’12’}]
]

I aim to achieve an array that appears as:

newArray=  [
        {15:[[{name:’a’,age:’4’,group:’15’},{name:’b’,age:’4’,group:’15’}, 
              {name:’c’,age:’4’,group:’15’}],[{name:’d’,age:’5’,group:’15’}, 
              {name:’e’,age:’5’,group:’15’},{name:’f’,age:’5’,group:’15’}]
        },
        {12:[[{name:’aa’,age:’6’,group:’12’},{name:’bb’,age:’6’,group:’12’}],
            [{name:’dd’,age:’7’,group:’12’},{name:’ee’,age:’7’,group:’12’}, 
             {name:’ff’,age:’7’,group:’12’}]]
        }
    ]

Many thanks!

javascript arrays grouping arrayobject

Answer 1

Answer №1

To make arrays flat, you can use the flatten method.
In order to group by group and age, create object maps.
Then, extract individual objects from the object map and convert ages objects into arrays.
As ages are numbers, ES2015 automatically sorts integer indexes, resulting in the data being already sorted by age.

Note: The JavaScript data object provided is not valid JavaScript code due to the use of non-standard single quotes and unclosed brackets. It has been parsed as a string and sanitized to JSON.

res = 
Object.entries(
array.flat().reduce((res,x)=>{
  const {age, group} = x
  res[group] = res[group] || {}
  res[group][age] = res[group][age] || []
  res[group][age].push(x)
  return res
},{})
).map(([k,v])=>({[k]: Object.values(v)}))

console.log(res)

<script>
array =
JSON.parse(`[
    [{name:"a",age:"4",group:"15"},{name:"b",age:"4",group:"15"}, 
     {name:"c",age:"4",group:"15"}],
    [{name:"aa",age:"6",group:"12"},{name:"bb",age:"6",group:"12"}],
    [{name:"d",age:"5",group:"15"},{name:"e",age:"5",group:"15"}, 
     {name:"f",age:"5",group:"15"}],
    [{name:"dd",age:"7",group:"12"}, 
     {name:"ee",age:"7",group:"12"},{name:"ff",age:"7",group:"12"}]
]`.replace(/"/g,"'").replace(/(name|age|group)/g,"'$1'"))
</script>

Answer 2

To make arrays flat, you can use the flatten method.
In order to group by group and age, create object maps.
Then, extract individual objects from the object map and convert ages objects into arrays.
As ages are numbers, ES2015 automatically sorts integer indexes, resulting in the data being already sorted by age.

Note: The JavaScript data object provided is not valid JavaScript code due to the use of non-standard single quotes and unclosed brackets. It has been parsed as a string and sanitized to JSON.

res = 
Object.entries(
array.flat().reduce((res,x)=>{
  const {age, group} = x
  res[group] = res[group] || {}
  res[group][age] = res[group][age] || []
  res[group][age].push(x)
  return res
},{})
).map(([k,v])=>({[k]: Object.values(v)}))

console.log(res)

<script>
array =
JSON.parse(`[
    [{name:"a",age:"4",group:"15"},{name:"b",age:"4",group:"15"}, 
     {name:"c",age:"4",group:"15"}],
    [{name:"aa",age:"6",group:"12"},{name:"bb",age:"6",group:"12"}],
    [{name:"d",age:"5",group:"15"},{name:"e",age:"5",group:"15"}, 
     {name:"f",age:"5",group:"15"}],
    [{name:"dd",age:"7",group:"12"}, 
     {name:"ee",age:"7",group:"12"},{name:"ff",age:"7",group:"12"}]
]`.replace(/"/g,"'").replace(/(name|age|group)/g,"'$1'"))
</script>

Answer 3

Answer №2

If you want to achieve a similar result, you can utilize the Reduce method:

array =
[
    [{name:'a',age:'4',group:'15'},
     {name:'b',age:'9',group:'15'}, 
     {name:'c',age:'6',group:'15'},
     {name:'c',age:'8',group:'15'},
     {name:'c',age:'4',group:'15'}],
    [{name:'aa',age:'6',group:'12'}]
];
const groupByAge = (acc, elem)=>{
    acc[elem.age] = acc[elem.age]?  [...acc[elem.age],elem] : [elem];
    return acc
}
var res = array.reduce((acc, elem)=>{
var key = "";
  elem.forEach(k=> {
       key  = k.group;
       acc[k.group] = acc[k.group] ?  [...acc[k.group], k] : [k];
   });
  var temp= acc[key].reduce(groupByAge, {});
  acc[key] = Object.values(temp);
  return acc
},{});

console.log([res])

Answer 4

If you want to achieve a similar result, you can utilize the Reduce method:

array =
[
    [{name:'a',age:'4',group:'15'},
     {name:'b',age:'9',group:'15'}, 
     {name:'c',age:'6',group:'15'},
     {name:'c',age:'8',group:'15'},
     {name:'c',age:'4',group:'15'}],
    [{name:'aa',age:'6',group:'12'}]
];
const groupByAge = (acc, elem)=>{
    acc[elem.age] = acc[elem.age]?  [...acc[elem.age],elem] : [elem];
    return acc
}
var res = array.reduce((acc, elem)=>{
var key = "";
  elem.forEach(k=> {
       key  = k.group;
       acc[k.group] = acc[k.group] ?  [...acc[k.group], k] : [k];
   });
  var temp= acc[key].reduce(groupByAge, {});
  acc[key] = Object.values(temp);
  return acc
},{});

console.log([res])

Organize objects in an array as an array of arrays in JavaScript

Answer №1

Answer №2

Similar questions

Sorting an object array by date is causing a problem

I need RxJs to return individual elements to the subscriber instead of an array when using http.get

Switching between pages and updating the URL without needing to refresh the page, while still maintaining the content even after a refresh

Tips for Printing a div Element with Horizontal Scrollbars

Remove a div using JavaScript

Can you explain the term used to describe when specific sections of the source code are run during the build process to improve optimization?

Issue with resetting Knockout.JS array - unable to make it work

AngularJS Multi-select Dropdown Filter Logic

Using Typescript to add an element to a specific index in an array

Invoke functions within a separate function

How come the data I send gets converted to Undefined when working with Tabulator?

What steps can be taken to stop the update function from inserting data into MongoDB from a Meteor application

To convert an image file into a string, use JSON.stringify before including it in an AJAX request

Check the data from the radio button selection

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Retrieve a variety of items and pass them to a view using the mssql module in Node

What is the best way to conceal a set of buttons on the main page using vue.js?

My mocks for Jest's readFile and writeFile functions are not being loaded

Displaying a div when a button is clicked (PHP)

Unveiling the Power of KnockoutJS: Displaying HTML Content and Populating