How to sort an array based on one property and then group by another property in React Redux application

Question

I'm trying to manipulate data received from an API, it requires grouping according to the category like country, city and state based on their display_priority. Also, sort similar category items based on their display_priority. I did try using JS functions and also with lodash library, but couldn't get the desired output. API response:

[
    {
        "category": {
            "name": "country",
            "display_priority": 1
        },
        "name": "US",
        "display_priority": 2,
        "enabled": false
    },
    {
        "category": {
            "name": "city",
            "display_priority": 3
        },
        "name": "Greenville",
        "display_priority": 1,
        "enabled": true
    },
    {
        "category": {
            "name": "state",
            "display_priority": 2
        },
        "name": "Alabama",
        "display_priority": 2,
        "enabled": true
    },
    {
        "category": {
            "name": "state",
            "display_priority": 2
        },
        "name": "Arizona",
        "display_priority": 1,
        "enabled": false
    },
    {
        "category": {
            "name": "city",
            "display_priority": 3
        },
        "name": "Houston",
        "display_priority": 2,
        "enabled": false
    },
    {
        "category": {
            "name": "country",
            "display_priority": 1
        },
        "name": "Germany",
        "display_priority": 1,
        "enabled": true
    }
]

Required output:

[
{
   "category": "country",
   "list": [
      {
         "name": "Germany",
         "enabled": true
      },
      {
         "name": "US",
         "enabled": false
      }
   ]
},
{
   "category": "state",
   "list": [
      {
         "name": "Arizona",
         "enabled": false
      },
      {
         "name": "Alabama",
         "enabled": true
      }
   ]
},
{
   "category": "city",
   "list": [
      {
         "name": "Greenville",
         "enabled": true
      },
      {
         "name": "Houston",
         "enabled": false
      }
   ]
}]

Answer 1

You can easily get this result with a single Array.reduce and object destructuring:

const data = [{ "category": { "name": "country", "display_priority": 1 }, "name": "US", "display_priority": 2, "enabled": false }, { "category": { "name": "city", "display_priority": 3 }, "name": "Greenville", "display_priority": 1, "enabled": true }, { "category": { "name": "state", "display_priority": 2 }, "name": "Alabama", "display_priority": 2, "enabled": true }, { "category": { "name": "state", "display_priority": 2 }, "name": "Arizona", "display_priority": 1, "enabled": false }, { "category": { "name": "city", "display_priority": 3 }, "name": "Houston", "display_priority": 2, "enabled": false }, { "category": { "name": "country", "display_priority": 1 }, "name": "Germany", "display_priority": 1, "enabled": true } ]

const result = data.reduce((accumulator, {category, name, enabled}) => {
  let key = category.name
  accumulator[key] = accumulator[key] || { category: key, list: [] }
  accumulator[key].list.push({name, enabled})
  return accumulator
}, {})
console.log(Object.values(result))