React groupby with an property in JSON Array

Question

I am having a JSON array:

{
        "assets": [
          {
            "extension": "png",
            "id": "3",
            "fileType": "IMG",
            "name": "Screenshot-2020-07-09-at-4-25-30-PM_XX"
          },
          {
            "extension": "jpg",
            "id": "10",
            "fileType": "IMG",
            "name": "vertical-1_XXX"
          },
          {
            "extension": "mp4",
            "id": "15",
            "fileType": "VID",
            "name": "aaa"
          },
          {
            "extension": "pdf",
            "id": "19",
            "fileType": "DOC",
            "name": "ccc"
          }
        ]
      }

I need to group by filetype say for example for filetype IMG only 2

[
              {
                "extension": "png",
                "id": "3",
                "fileType": "IMG",
                "name": "Screenshot-2020-07-09-at-4-25-30-PM_XX"
              },
              {
                "extension": "jpg",
                "id": "10",
                "fileType": "IMG",
                "name": "vertical-1_XXX"
              }]

likewise, for the other 2 filetypes, the length of the array will be 1, since it has each element in the array

Please help me to groupby fileType in react

assets.sort((a,b) => a.fileType .localeCompare(b.fileType)). I am assuming assets as an array in the input — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jul 10, 2020 at 3:31
Doesn't this suffice your need here, it is also grouping only? Have a look at this , if you want something like this stackoverflow.com/questions/40774697/… — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jul 10, 2020 at 3:35

KcH · Accepted Answer · 2020-07-10 03:44:36Z

Hope this is what You are looking for :

var testObj = {
        "assets": [
          {
            "extension": "png",
            "id": "3",
            "fileType": "IMG",
            "name": "Screenshot-2020-07-09-at-4-25-30-PM_XX"
          },
          {
            "extension": "jpg",
            "id": "10",
            "fileType": "IMG",
            "name": "vertical-1_XXX"
          },
          {
            "extension": "mp4",
            "id": "15",
            "fileType": "VID",
            "name": "aaa"
          },
          {
            "extension": "pdf",
            "id": "19",
            "fileType": "DOC",
            "name": "ccc"
          }
        ]
      }
      
      const groupBy = function(toFilter,type){
         let res = testObj.assets.filter(obj=>obj[toFilter]===type);
         return res;
      }
      
      console.log(groupBy('fileType',"IMG"));
      
      //LIKE WISE PASS ON THE toFilter , and type

ABGR · Accepted Answer · 2020-07-10 03:48:26Z

1

I guess this is what you want to do. Use .reduce to group the elements based on their filetype.

var arr = {
        "assets": [
          {
            "extension": "png",
            "id": "3",
            "fileType": "IMG",
            "name": "Screenshot-2020-07-09-at-4-25-30-PM_XX"
          },
          {
            "extension": "jpg",
            "id": "10",
            "fileType": "IMG",
            "name": "vertical-1_XXX"
          },
          {
            "extension": "mp4",
            "id": "15",
            "fileType": "VID",
            "name": "aaa"
          },
          {
            "extension": "pdf",
            "id": "19",
            "fileType": "DOC",
            "name": "ccc"
          }
        ]
      };
      
      
var data = arr.assets;

var r= data.reduce((acc, ele)=>{
  acc[ele.fileType] = acc[ele.fileType] ? [...acc[ele.fileType], ele] : [ele];
  return acc
},{});

console.log(r['IMG'])

EDIT: To get only IMG grouping you can just do r['IMG']

edited Jul 10, 2020 at 3:48

answered Jul 10, 2020 at 3:44

ABGR

5,2634 gold badges34 silver badges56 bronze badges

1 Comment

midhun k Over a year ago

can you explicity add code to retrieve filetype with IMG only please

solanki... · Accepted Answer · 2020-07-10 04:07:37Z

1

Working Code !!

using map() method in ES6

const data = {
  "assets": [{
      "extension": "png",
      "id": "3",
      "fileType": "IMG",
      "name": "Screenshot-2020-07-09-at-4-25-30-PM_XX"
    },
    {
      "extension": "jpg",
      "id": "10",
      "fileType": "IMG",
      "name": "vertical-1_XXX"
    },
    {
      "extension": "mp4",
      "id": "15",
      "fileType": "VID",
      "name": "aaa"
    },
    {
      "extension": "pdf",
      "id": "19",
      "fileType": "DOC",
      "name": "ccc"
    }
  ]
};

const filterFile = (type) => {
  let result = [];
  data.assets.map((o) => {
    if (o.fileType === type) {
      result = [...result, o];
    }
  });
  return result;
}
console.log(filterFile('IMG'));

answered Jul 10, 2020 at 4:07

solanki...

5,1182 gold badges29 silver badges29 bronze badges

1 Comment

ABGR Over a year ago

i don't think that performs any better than filter. Plus there's an unnecessary mutation due to it.

Collectives™ on Stack Overflow

React groupby with an property in JSON Array

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related