Map array of objects to collection using Lodash

Question

I have an array of JS objects like this from an API call:

[
    {
        "date": "2018-09-21T07:00:00",
        "assignments": 1
    },
    {
        "date": "2018-09-17T07:00:00",
        "assignments": 3
    },
    {
        "date": "2018-09-12T07:00:00",
        "assignments": 0
    }
]

How can use Lodash to map this array to the following collection of objects?

{{
'2018-09-21': {selected: true},
'2018-09-17': {selected: true},
'2018-09-12': {selected: true}
}}

The {marked:true} object can be hard-coded and the date needs to be formatted as shown.

Thanks!

The posted question does not appear to include [any attempt](https://idownvotedbecau.se/noattempt/) at all to solve the problem. StackOverflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users), as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a [MCVE]. For more information, please see [ask] and take the [tour]. — CertainPerformance, Oct 03 '18 at 09:10
StackOverflow is not a platform to ask others to write code for your, but to help you with an existing problem. So you should at least show an attempt how you tried to solve that and explain what the problem in solving was. You don't need to use lodash anyway but could use [Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) — t.niese, Oct 03 '18 at 09:22
If you want to use lowdash then tak a look at [lodash: mapping array to object](https://stackoverflow.com/questions/35489849/lodash-mapping-array-to-object) and at [`_.keyBy`](https://lodash.com/docs/4.17.10#keyBy)` that explains how to transform the key and [`_.mapValues`](https://lodash.com/docs/4.17.10#mapValues) how to transform the value. — t.niese, Oct 03 '18 at 09:26

Cata John · Answer 1 · 2018-10-03T09:55:29.340

Plain JS implementation

const myArr = [
    {
        "date": "2018-09-21T07:00:00",
        "assignments": 1
    },
    {
        "date": "2018-09-17T07:00:00",
        "assignments": 3
    },
    {
        "date": "2018-09-12T07:00:00",
        "assignments": 0
    }
];
 
const result = myArr.reduce((acc, currentValue) => {
  const formattedDate = currentValue.date.substr(0, 10);
  acc[formattedDate] = { selected: true };

  return acc;
}, {});

console.log(result);

Lodash implementation

const myArr = [
    {
        "date": "2018-09-21T07:00:00",
        "assignments": 1
    },
    {
        "date": "2018-09-17T07:00:00",
        "assignments": 3
    },
    {
        "date": "2018-09-12T07:00:00",
        "assignments": 0
    }
];
 
const result = _.reduce(myArr, (acc, currentValue) => {
  const formattedDate = currentValue.date.substr(0, 10);
  acc[formattedDate] = { selected: true };

  return acc;
}, {});

console.log(result);

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

While this is parital correct (the date is not formatted corretly) the question is about how to solve that with lowdash (for whatever reason). So pointing out that plain javascript can be used is good, but you should also provide a lowdash solution. — t.niese, Oct 03 '18 at 09:30
@t.niese Thank you for pointing it out. I was just fixing that. It should be fine now. — Cata John, Oct 03 '18 at 09:33

Akrion · Answer 2 · 2018-10-08T22:43:24.660

0

Really no need to lodash in this scenario if you can utilize ES5 and just use reduce for one liner like so:

var data = [ { "date": "2018-09-21T07:00:00", "assignments": 1 }, { "date": "2018-09-17T07:00:00", "assignments": 3 }, { "date": "2018-09-12T07:00:00", "assignments": 0 } ]

const result = data.reduce((r, {date}) => 
   (r[date.substr(0, 10)] = { selected: true }) && r, {})

console.log(result)

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

Now if you can't use ES6 and arrow functions due to browser restrictions etc. with lodash you could do same thing via:

_.reduce(data, function (r, c) { r[c.date.substr(0, 10)] = { selected: true }; return r }, {})

edited Oct 08 '18 at 22:43

answered Oct 03 '18 at 19:27

Akrion

18,117
1
34
54

Reduce is ES5 not ES6. You can use it with a normal function(not arrow). – Cata John Oct 04 '18 at 05:18
1

Thanks but isn't that what I said: `if you can't use ES6 and arrow functions due to browser restrictions`? I provided the 2nd example specifically for that case without arrow functions and using `lodash` _.reduce where the 1st example was with both ES5 reduce and ES6 arrow functions. I will try to make it more clearer. Thanks – Akrion Oct 04 '18 at 05:21

Map array of objects to collection using Lodash

2 Answers2