How can I convert an Array into a Dictionary using JavaScript?

Question

How can I convert an Array into a Dictionary using JavaScript?

Is there a clever method (perhaps using a map function) to restructure my data object from this:

[
  {id: 1, from: "1/1/2021", to: "1/2/2022"},
  {id: 2, from: "1/3/2021", to: "1/4/2022"},
  {id: 1, from: "1/5/2021", to: "1/6/2022"},
  {id: 2, from: "1/6/2021", to: "1/7/2022"}
]

to the following format:

{
  1: [{from: "1/1/2021", to: "1/2/2022"}, {from: "1/5/2021", to: "1/6/2022"}],
  2: [{from: "1/3/2021", to: "1/4/2022"}, {from: "1/6/2021", to: "1/7/2022"}]
}

Check out the code snippet below for reference:

const res = [
  {id: 1, from: "1/1/2021", to: "1/2/2022"},
  {id: 2, from: "1/3/2021", to: "1/4/2022"},
  {id: 1, from: "1/5/2021", to: "1/6/2022"},
  {id: 2, from: "1/6/2021", to: "1/7/2022"}
]

let dict = {};
for(var i=0; i < res.length; i++) {
   dict[res[i].id] = dict[res[i].id] || [];
   dict[res[i].id].push({from:res[i].from, to:res[i].to});
}
console.log(dict);

javascript json

Answer 1

Answer №1

To group by any property, such as id, you can implement a custom groupBy() function using Array.reduce() to transform the data into the desired object structure.

Note: In this updated version, we have excluded the specified property, in this case id, from the resulting grouped arrays.

let input = [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2021", to: "1/6/2022"}, {id: 2, from: "1/6/2021", to: "1/7/2022"} ];

function groupBy(arr, property) {
    return arr.reduce((acc, cur) => {
        const { [property]: _, ...obj} = cur;
        acc[cur[property]] = [...(acc[cur[property]] || []), obj];
        return acc;
    }, {})
}

console.log(groupBy(input, 'id'))

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

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

You also have the option to utilize lodash groupBy for this purpose, requiring minimal code:

let input = [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2021", to: "1/6/2022"}, {id: 2, from: "1/6/2021", to: "1/7/2022"} ];

console.log('groupBy (lodash):', _.groupBy(input, 'id'));

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

Additionally, you can leverage reduce with a Map object for grouping purposes:

let input = [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2021", to: "1/6/2022"}, {id: 2, from: "1/6/2021", to: "1/7/2022"} ];

function groupBy(arr, property) {
    return Object.fromEntries(arr.reduce((acc, cur) => { 
        return acc.set(cur[property], [...(acc.get(cur[property]) || []), cur]);
    }, new Map()))
}

console.log(groupBy(input, 'id'))

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

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

Answer 2

To group by any property, such as id, you can implement a custom groupBy() function using Array.reduce() to transform the data into the desired object structure.

Note: In this updated version, we have excluded the specified property, in this case id, from the resulting grouped arrays.

let input = [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2021", to: "1/6/2022"}, {id: 2, from: "1/6/2021", to: "1/7/2022"} ];

function groupBy(arr, property) {
    return arr.reduce((acc, cur) => {
        const { [property]: _, ...obj} = cur;
        acc[cur[property]] = [...(acc[cur[property]] || []), obj];
        return acc;
    }, {})
}

console.log(groupBy(input, 'id'))

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

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

You also have the option to utilize lodash groupBy for this purpose, requiring minimal code:

let input = [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2021", to: "1/6/2022"}, {id: 2, from: "1/6/2021", to: "1/7/2022"} ];

console.log('groupBy (lodash):', _.groupBy(input, 'id'));

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

Additionally, you can leverage reduce with a Map object for grouping purposes:

let input = [ {id: 1, from: "1/1/2021", to: "1/2/2022"}, {id: 2, from: "1/3/2021", to: "1/4/2022"}, {id: 1, from: "1/5/2021", to: "1/6/2022"}, {id: 2, from: "1/6/2021", to: "1/7/2022"} ];

function groupBy(arr, property) {
    return Object.fromEntries(arr.reduce((acc, cur) => { 
        return acc.set(cur[property], [...(acc.get(cur[property]) || []), cur]);
    }, new Map()))
}

console.log(groupBy(input, 'id'))

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

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

Answer 3

Answer №2

Using Array.reduce() method can provide a solution to your issue.

const data = [
  {id: 1, from: "1/1/2021", to: "1/2/2022"},
  {id: 2, from: "1/3/2021", to: "1/4/2022"},
  {id: 1, from: "1/5/2021", to: "1/6/2022"},
  {id: 2, from: "1/6/2021", to: "1/7/2022"}
];

var result = data.reduce(function(accumulator, {id, from, to}) {
  (accumulator[id] = accumulator[id] || []).push({from, to});
  return accumulator;
}, {});

console.log(result);

Answer 4

Using Array.reduce() method can provide a solution to your issue.

const data = [
  {id: 1, from: "1/1/2021", to: "1/2/2022"},
  {id: 2, from: "1/3/2021", to: "1/4/2022"},
  {id: 1, from: "1/5/2021", to: "1/6/2022"},
  {id: 2, from: "1/6/2021", to: "1/7/2022"}
];

var result = data.reduce(function(accumulator, {id, from, to}) {
  (accumulator[id] = accumulator[id] || []).push({from, to});
  return accumulator;
}, {});

console.log(result);

How can I convert an Array into a Dictionary using JavaScript?

Answer №1

Answer №2

Similar questions

I'm currently utilizing lint in my Angular 2+ project. Is there a way to arrange the constructor parameters in alphabetical order

Encountered an issue while working with npm vue-cli

Connecting to a MongoDB or Mongoose database dynamically using Node.js

Update the inputs following the filtering or searching of issues in VueJS

Troubleshooting the issue of "Mismatched transaction number*" in MongoDB and Node.js

Tips for retrieving an element's outerHTML, innerHTML, and text content using JavaScript

Changes made in the view of a VueJS application are not being reflected in Laravel when using

The process of linking a JsonObject attribute to XML using MOXy

Utilize Vue.JS to showcase JSON information from an external file

"Encountering a Node.js error while trying to open an image for the second

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

Best method for reusing a component in React?

Enhance the parsed struct by adding a new variable called json

Can transclusion be achieved while maintaining the directive's scope in Angular?

Angular 2 is not recognizing the element 'router-outlet'

What is the best way to modify an array of objects within component state?

Extract objects from a nested array using a specific identifier

Can global scope be injected into a class instantiated in ES6, also known as a singleton?

Increasing numerical values within an array using JavaScript

Using MEAN.JS to Define Query Parameters for Mongo from the Client Controller