Group json data by a property - vue.js

Question

I have a JSON I would like to re-arrange my data, so that I can group all items by category name. Here is my data.

[
  {
    "id":317,
    "name":"Ingram's Camphor Cream",
    "slug":null,
    "product_category_id":15,
    "industry_id":2,
    "deleted_at":null,
    "category":{
      "id":15,
      "name":"Skincare",
      "slug":null,
      "industry_id":2,
      "deleted_at":null,
      "sku_id":3,
      "is_active":1
    },
  },
  {
    "id":323,
    "name":"Zimgold",
    "slug":null,
    "product_category_id":2,
    "industry_id":2,
    "category":{
      "id":2,
      "name":"Cooking Oils",
      "slug":null,
      "industry_id":2,
      "sku_id":2,
      "is_active":1
    }
  }
]

I would like to have a result like so:

[
   'Skincare': [ {}],
   'Cooking Oils': [{}]
]

Thank you in advance. I would really appreciate your help.

DustInComp · Accepted Answer · 2021-12-02 08:19:53Z

1

You can reduce the array of products to a map of names to product arrays with a reducer like this:

const grouped = products.reduce((grouped, product) => {
  const key = product.category.name
  // replace the array at [key] with a new one including the current element
  return { ...grouped, [key]: (grouped[key]??[]).concat(product)}
}, {})

answered Dec 2, 2021 at 8:19

DustInComp

2,7431 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Highforce Thomas Over a year ago

Thanks but how do i make the result an array rather than an object.

DustInComp Over a year ago

I assumed the square brackets were a typo, since arrays don't have string keys. If you want to iterate over all groups, you can use Object.entries(grouped). This will return an array of [key: string, value: Product[]] pairs.

DustInComp Over a year ago

I submitted an edit suggestion for what I thought was a typo in your result example before I read your comment. Could you make some minor edit to your question so my suggestion gets rejected automatically?

Mucksh · Accepted Answer · 2021-12-02 08:25:19Z

1

Maybe there is a a prettier way but something like this would work

 var groupedData = {};

    data.forEach(item => {
        if (!groupedData[item.category.name]) {
            groupedData[item.category.name] = [];
        }
        groupedData[item.category.name].push(item);
    })

answered Dec 2, 2021 at 8:25

Mucksh

1585 bronze badges

Comments

richerJoe · Accepted Answer · 2021-12-02 10:10:46Z

0

arr.map(item=>{
    let key = item.category.name
    return {[key]:item}
})

answered Dec 2, 2021 at 10:10

richerJoe

11 bronze badge

Collectives™ on Stack Overflow

Group json data by a property - vue.js

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related