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, Jul 10 '20 at 03:31
Doesn't this suffice your need here, it is also grouping only? Have a look at this , if you want something like this https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key — Harmandeep Singh Kalsi, Jul 10 '20 at 03:35
I expect using groupby... Can you share a jsfiddle for the same , so i can check what exactly are u saying . — midhun k, Jul 10 '20 at 03:40
@HarmandeepSinghKalsi i need list of objects in an array who are having filetype as IMG, or VID — midhun k, Jul 10 '20 at 03:42
Try this var result = assets.reduce(function (r, a) { r[a.fileType] = r[a.fileType] || []; r[a.fileType].push(a); return r; }, Object.create(null)); console.log(result); — Harmandeep Singh Kalsi, Jul 10 '20 at 03:45
you should remove React in your question title, as it is a bit misleading, seems the question is only plain javascript and not related to React at all. — CHANist, Jul 10 '20 at 04:30

ABGR · Answer 1 · 2020-07-10T03:48:26.960

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']

can you explicity add code to retrieve filetype with IMG only please — midhun k, Jul 10 '20 at 03:45

score 1 · Accepted Answer · answered Jul 10 '20 at 03:44

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

score 1 · Answer 3 · answered Jul 10 '20 at 04:07

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'));

i don't think that performs any better than filter. Plus there's an unnecessary mutation due to it. — ABGR, Jul 10 '20 at 10:31

React groupby with an property in JSON Array

3 Answers3