Categorize the array based on the nested keys

Question

Categorize the array based on the nested keys

Is there a way in ES6 or Ramda to group an array of objects by an object key and then create a new array of objects based on the grouping? For example, consider the following array of objects:

[
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  ...
]

I want to create a new array that's grouped by ptj.desc or ptj.code:

[
  {
    "PTJ": "ABCD 123",
    "data": [
      {
        "name": "ABCD123",
        "code": "GFDGF",
        "ptj": {
          "code": "123",
          "desc": "ABCD 123"
        }
      },
      ...
    ]
  },
  ...
]

I tried using the following code:

const stores = myArray.reduce((r, a) => {
    r[a.ptj.desc] = r[a.ptj.desc] || [];
    r[a.ptj.desc].push(a);
    return r;
}, {});

However, this converts it into an object and I cannot use array.map. Can you advise on how to correct and improve this using ES6 or Ramda? Thank you in advance.

javascript arrays ecmascript-6 ramda.js

Answer 1

Answer №1

If your goal is to group objects based on the same ptj.desc value and are fine with the resulting object having keys as indexes, you can simply utilize R.groupBy in this manner:

const data = [
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ABCD123ABCD",
    "code": "LOLL23",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN 2",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  }
]

const fn = R.groupBy(R.path(['ptj','desc']))

console.log(fn(data))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

If your objective is to have a structure similar to the example in your query, then you can combine the above approach with R.map, R.zipObj, and R.toPairs like demonstrated below:

const data = [
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ABCD123ABCD",
    "code": "LOLL23",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN 2",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  }
]

const fn = R.groupBy(R.path(['ptj','desc']))

const fn2 = R.compose(R.map(R.zipObj(['PTJ', 'data'])), R.toPairs, fn)

console.log(fn2(data))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 2

If your goal is to group objects based on the same ptj.desc value and are fine with the resulting object having keys as indexes, you can simply utilize R.groupBy in this manner:

const data = [
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ABCD123ABCD",
    "code": "LOLL23",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN 2",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  }
]

const fn = R.groupBy(R.path(['ptj','desc']))

console.log(fn(data))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

If your objective is to have a structure similar to the example in your query, then you can combine the above approach with R.map, R.zipObj, and R.toPairs like demonstrated below:

const data = [
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ABCD123ABCD",
    "code": "LOLL23",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  {
    "name": "ANGGUN 2",
    "code": "DSFD54",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "GDFDGG",
    "code": "HJ2",
    "ptj": {
      "code": "111",
      "desc": "111 123"
    }
  },
  {
    "name": "POT",
    "code": "POT89",
    "ptj": {
      "code": "222",
      "desc": "222 123"
    }
  },
  {
    "name": "POTER UTAMA",
    "code": "POTER345",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  }
]

const fn = R.groupBy(R.path(['ptj','desc']))

const fn2 = R.compose(R.map(R.zipObj(['PTJ', 'data'])), R.toPairs, fn)

console.log(fn2(data))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 3

Answer №2

To group by either ptj.desc or ptj.code, you can utilize the reduce() method. In the following example, we use ptj.desc for grouping.

let proj = [{"name":"ABCD123","code":"GFDGF","ptj":{"code":"123","desc":"ABCD 123"}},{"name":"ANGGUN","code":"DSFD54","ptj":{"code":"111","desc":"111 123"}},{"name":"GDFDGG","code":"HJ2","ptj":{"code":"111","desc":"111 123"}},{"name":"POT","code":"POT89","ptj":{"code":"222","desc":"222 123"}},{"name":"POTER UTAMA","code":"POTER345","ptj":{"code":"123","desc":"ABCD 123"}},{"name":"ABCD123ABCD","code":"LOLL23","ptj":{"code":"123","desc":"ABCD 123"}},{"name":"ANGGUN 2","code":"DSFD54","ptj":{"code":"111","desc":"111 123"}},{"name":"GDFDGG","code":"HJ2","ptj":{"code":"111","desc":"111 123"}},{"name":"POT","code":"POT89","ptj":{"code":"222","desc":"222 123"}},{"name":"POTER UTAMA","code":"POTER345","ptj":{"code":"123","desc":"ABCD 123"}}]

result = proj.reduce(function (a, c) {
  a[c.ptj.desc] = a[c.ptj.desc] || [];
  a[c.ptj.desc].push(c)
  return a;
}, Object.create(null));
console.log(result);

Answer 4

To group by either ptj.desc or ptj.code, you can utilize the reduce() method. In the following example, we use ptj.desc for grouping.

let proj = [{"name":"ABCD123","code":"GFDGF","ptj":{"code":"123","desc":"ABCD 123"}},{"name":"ANGGUN","code":"DSFD54","ptj":{"code":"111","desc":"111 123"}},{"name":"GDFDGG","code":"HJ2","ptj":{"code":"111","desc":"111 123"}},{"name":"POT","code":"POT89","ptj":{"code":"222","desc":"222 123"}},{"name":"POTER UTAMA","code":"POTER345","ptj":{"code":"123","desc":"ABCD 123"}},{"name":"ABCD123ABCD","code":"LOLL23","ptj":{"code":"123","desc":"ABCD 123"}},{"name":"ANGGUN 2","code":"DSFD54","ptj":{"code":"111","desc":"111 123"}},{"name":"GDFDGG","code":"HJ2","ptj":{"code":"111","desc":"111 123"}},{"name":"POT","code":"POT89","ptj":{"code":"222","desc":"222 123"}},{"name":"POTER UTAMA","code":"POTER345","ptj":{"code":"123","desc":"ABCD 123"}}]

result = proj.reduce(function (a, c) {
  a[c.ptj.desc] = a[c.ptj.desc] || [];
  a[c.ptj.desc].push(c)
  return a;
}, Object.create(null));
console.log(result);

Answer 5

Answer №3

There are multiple approaches to achieve the desired outcome, but the method you've outlined aligns with a key-value lookup using IDs.

First, an array of keys is created (such as {}.ptj.desc), then all objects are mapped to a new object where the keys match the previously defined array. The result? Success.

Check out the example provided below. Hopefully, it meets your requirements.

var mainStore = [
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  // Other objects omitted for brevity
];

var idList = mainStore.map(item => item.ptj.desc);

var dataMap = mainStore.reduce(( dataMap, item ) => {
  dataMap[ item.ptj.desc ] = item;
  return dataMap;
}, {});

// Proceed with operations based on idList 

var onlyCodes = idList.map(id => dataMap[ id ].ptj.code);
var onlyNames = idList.map(id => dataMap[ id ].name);

console.log(onlyCodes);
console.log(onlyNames);

Answer 6

There are multiple approaches to achieve the desired outcome, but the method you've outlined aligns with a key-value lookup using IDs.

First, an array of keys is created (such as {}.ptj.desc), then all objects are mapped to a new object where the keys match the previously defined array. The result? Success.

Check out the example provided below. Hopefully, it meets your requirements.

var mainStore = [
  {
    "name": "ABCD123",
    "code": "GFDGF",
    "ptj": {
      "code": "123",
      "desc": "ABCD 123"
    }
  },
  // Other objects omitted for brevity
];

var idList = mainStore.map(item => item.ptj.desc);

var dataMap = mainStore.reduce(( dataMap, item ) => {
  dataMap[ item.ptj.desc ] = item;
  return dataMap;
}, {});

// Proceed with operations based on idList 

var onlyCodes = idList.map(id => dataMap[ id ].ptj.code);
var onlyNames = idList.map(id => dataMap[ id ].name);

console.log(onlyCodes);
console.log(onlyNames);

Answer 7

Answer №4

If utilizing a map function is your goal, consider implementing it in the following manner:

const newArray = Object.keys(locations).map(index => locations[index])

Answer 8

If utilizing a map function is your goal, consider implementing it in the following manner:

const newArray = Object.keys(locations).map(index => locations[index])

Categorize the array based on the nested keys

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Reorganizing a list in AngularJS after adding a new item

Setting the percentage height of parent and child divs in a precise manner

Show a loading progress image during the page loading process (not during form submission)

A guide on truncating a portion of a string within a PHP two-dimensional array

In React, the state's value will revert back to its initialState whenever a new value is assigned

Having trouble locating the objects in the parent scope of an Angular directive

Executing numerous Ajax requests within a single Rails view

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

The act of scrolling through list elements does not initiate upon the first click

Passing a DOM element from Selenium to JQuery and retrieving the results in C#

Authentication Error (401) in WordPress JWT

ImageMapster for perfect alignment

The table's content extends beyond the confines of the page

Place the child's text within the matching parent data element

Operating on JSON objects/arrays according to their values

Exploring the functionalities of the useState object with mapping techniques

Issues related to ng-model within a dropdown list

A JavaScript regular expression for identifying IMDB URLs

Issue with Zebra_Calendar and JSON compatibility in Internet Explorer 7

Using event.target.value in find() caused the function to return undefined, but it worked as expected when storing the value in