Convert array of arrays to array of objects grouped together

Question

I have an array of arrays. How do I convert them to an array of objects grouped together?

var abc = [
  ['apple', 'fruit'], ['banana', 'fruit'], ['grapes', 'fruit'], ['red', 'color'], ['blue', 'color'], ['black', 'color']
]


abc = abc.map(function(item) {
  return {
    value: item[0],
    color: item[1]
  }
})

colors = abc.filter(function(item) {
  return item.color === 'color'
})

fruits = abc.filter(function(item) {
  return item.color === 'fruit'
})

var result = [{
  group: 'color',
  value: colors.map(function(item) {
    return item.value
  })
}, {
  group: 'fruit',
  value: fruits.map(function(item) {
    return item.value
  })
}]

console.log(result)

My expected output is:

var abc = [
{
    group: 'color',
    value: ['red', 'blue', 'black']
},
{
    group: 'fruit',
    value: ['apple', 'banana', 'grapes']
}]

Is there an easier way to achieve this?

I can use lodash too. Please advise.

Use reduce, group elements that match the group value; by extending object IF already exists, and creating if it does not. — Patryk Cieszkowski
– Patryk Cieszkowski, Commented Oct 4, 2018 at 19:08

ggorlen · Accepted Answer · 2018-10-04 19:21:31Z

4

Here's an approach using reduce and map. reduce performs an aggregation by group mapped to an array of values. Object.entries() and map transform this grouping into the desired format as an array of objects.

var abc = [
  ['apple', 'fruit'],
  ['banana', 'fruit'],
  ['grapes', 'fruit'],
  ['red', 'color'],
  ['blue', 'color'],
  ['black', 'color']
];

const result = Object.entries(
    abc.reduce((a, e) => {
      if (!(e[1] in a)) {
        a[e[1]] = [];
      }

      a[e[1]].push(e[0]);
      return a;
    }, {})
  ).map(e => ({group: e[0], value: e[1]}))
;

console.log(result);

edited Oct 4, 2018 at 19:21

answered Oct 4, 2018 at 19:06

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomas Over a year ago

IMHO this is cleanest and most "functional" approach to this problem.

Nina Scholz · Accepted Answer · 2018-10-04 19:14:01Z

2

You could group with lodash by the index and map the values of the other index.

var data = [['apple', 'fruit'], ['banana', 'fruit'], ['grapes', 'fruit'], ['red', 'color'], ['blue', 'color'], ['black', 'color']],
    result = _(data)
        .groupBy(1)
        .map((array, group) => ({ group, value: _.map(array, 0) }))
        .sortBy('group')
        .value();

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

edited Oct 4, 2018 at 19:14

answered Oct 4, 2018 at 19:08

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Patryk Cieszkowski · Accepted Answer · 2018-10-04 19:16:05Z

1

Here's a method I've described in a comment to your question:

you loop through all elements, and create a blank array
Inside of your newly created array, you find object matching group value
If found, you extend the element

If not found, you create it

abc.reduce((arr, input) => {
  const index = arr.findIndex(i => i.group === input[0])

  return [
    ...(index > -1
      ? [
        ...arr.slice(0, index),
        {
          group: input[0],
          value: [
            ...arr[index].value,
            input[1]
          ]
        },
        ...arr.slice(index + 1)
      ] : [
        ...arr,
        {
          group: input[0],
          value: [ input[1] ]
        }
      ])
  ]
}, [])

answered Oct 4, 2018 at 19:16

Patryk Cieszkowski

7516 silver badges23 bronze badges

2 Comments

Tomas Over a year ago

IMHO such long ternary operator may be confusing to decrypt, but hey, that's at least different approach

Patryk Cieszkowski Over a year ago

@Tomas agree, but that's why consistent indentation is the key here

trincot · Accepted Answer · 2018-10-04 19:19:41Z

1

Here is way to do it with an ES6 Map as intermediate data structure:

var abc = [['apple', 'fruit'],['banana', 'fruit'],['grapes', 'fruit'],['red', 'color'],['blue', 'color'],['black', 'color']];
    
const groups = new Map(abc.map(a =>[a[1], []]));
abc.forEach(a => groups.get(a[1]).push(a[0]));
const result = Array.from(groups, ([group, values]) =>  ({group, values}));

console.log(result);

answered Oct 4, 2018 at 19:19

trincot

357k38 gold badges282 silver badges338 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2018-10-04 19:18:24Z

0

You could build up a hashtavle to find duplicate descriptors:

 const result = [], hash = {};

 for(const [value, group] of abc) {
  if(hash[group]) {
   hash[group].push(value);
  } else {
   result.push({ group, value: (hash[group] = [value]), });
  }
}

answered Oct 4, 2018 at 19:18

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Tomas · Accepted Answer · 2018-10-04 19:42:59Z

0

Approach with single reduce

var abc = [
  ['apple', 'fruit'],
  ['banana', 'fruit'],
  ['grapes', 'fruit'],
  ['red', 'color'],
  ['blue', 'color'],
  ['black', 'color']
]

var r = abc.reduce((prev, curr) => {
  if(prev.findIndex(p => p.group === curr[1]) === -1) {
    prev = prev.concat({group: curr[1], value: []})
  }
  let idx = prev.findIndex(p => p.group === curr[1])
  prev[idx].value.push( curr[0] )
  return prev;
}, [])

console.log(r)

answered Oct 4, 2018 at 19:42

Tomas

3,4754 gold badges36 silver badges54 bronze badges

Collectives™ on Stack Overflow

Convert array of arrays to array of objects grouped together

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related