how to remap array using javascript

Question

How to remap this sample array from

var keyData = [
  { 'dir': 'left', 'code': 93 },
  { 'dir': 'left', 'code': 971 },
  { 'dir': 'right', 'code': 975 },
  { 'dir': 'right', 'code': 976 },
];

to this array:

var keyData = [
   left :[
      { 'dir': 'left', 'code': 93 },
      { 'dir': 'left', 'code': 971 },
   ],
   right:[
      { 'dir': 'right', 'code': 975 },
      { 'dir': 'right', 'code': 976 },
   ]
];

Can I solve this array by using lodash.

Your desired target is not valid javascript. Are you wanting a single object inside the top level array, or maybe a top level object instead of an array? — Seth Flowers, Aug 16 '18 at 12:45
If you have already have keys such as `left` or `right`, why do you want to store another key called as `dir` with left or right values? — nice_dev, Aug 16 '18 at 12:45
Possible duplicate of [How to group an array of objects by key](https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key) — str, Aug 16 '18 at 12:46

score 2 · Answer 1 · answered Aug 16 '18 at 12:47

2

If you meant to have just a top level object, instead of an array:

keyData = {
   left: keyData.filter(function(o) { return o.dir === 'left'; }),
   right: keyData.filter(function(o) { return o.dir === 'right'; })
};

If you meant to have just a top level array, containing an object:

keyData = [{
   left: keyData.filter(function(o) { return o.dir === 'left'; }),
   right: keyData.filter(function(o) { return o.dir === 'right'; })
}];

answered Aug 16 '18 at 12:47

Seth Flowers

8,990
2
29
42

We should close this question as a duplicate, it pops up every now and then. – str Aug 16 '18 at 12:52

trofivan · Answer 2 · 2018-08-17T07:07:05.727

Valid result is Object, not Array:

{
  left: [
    { 'dir': 'left', 'code': 93 },
    { 'dir': 'left', 'code': 971 },
  ],
  right: [
    { 'dir': 'right', 'code': 975 },
    { 'dir': 'right', 'code': 976 },
  ]
};

ES2018 implementation

const remap = (arr) => arr.reduce((acc, el) => ({
  ...acc,
  [el.dir]: acc[el.dir] ? [...acc[el.dir], el] : [el]
}), {});

const data = [
  { 'dir': 'left', 'code': 93 },
  { 'dir': 'left', 'code': 971 },
  { 'dir': 'right', 'code': 975 },
  { 'dir': 'right', 'code': 976 }
];

console.log(remap(data));

score 1 · Answer 3 · answered Aug 16 '18 at 12:48

you can use reduce function from Arrays to construct your new object

var keyData = [
  { 'dir': 'left', 'code': 93 },
  { 'dir': 'left', 'code': 971 },
  { 'dir': 'right', 'code': 975 },
  { 'dir': 'right', 'code': 976 },
];

keyData.reduce((prev, curr)=>{
  if(curr.dir==="right"){
    prev.right.push(curr)
  }else{
    prev.left.push(curr)
   }
  return prev
},{left:[], right:[]})

score 1 · Answer 4 · answered Aug 16 '18 at 12:49

This is the most productive way:

var keyData = [
  { 'dir': 'left', 'code': 93 },
  { 'dir': 'left', 'code': 971 },
  { 'dir': 'right', 'code': 975 },
  { 'dir': 'right', 'code': 976 },
];

var result = {}

for (let obj of keyData) {
  result[obj.dir] = result[obj.dir] || []
  result[obj.dir].push(obj)
}

console.log(result)

score 1 · Accepted Answer · answered Aug 16 '18 at 12:55

Use groupBy in loadash.

You can use the groupBy method of loadash, like so:

var keyData = [
  { 'dir': 'left', 'code': 93 },
  { 'dir': 'left', 'code': 971 },
  { 'dir': 'right', 'code': 975 },
  { 'dir': 'right', 'code': 976 },
];
console.log(_.groupBy(keyData, (data) => data.dir));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

how to remap array using javascript

5 Answers5

ES2018 implementation