Q:

Grouping elements in array by multiple properties

I have array like this:
var arr = [
{"type":"color","pid":"ITEM_1","id":"ITEM_1_1"},
{"type":"color","pid":"ITEM_2","id":"ITEM_2_2"},
{"type":"size","pid":"DEFAULT_0","id":"DEFAULT_0_1"},
{"type":"size","pid":"DEFAULT_0","id":"DEFAULT_0_2"}
]

And I want to make a new array look like this:
[
  {
    "type": "color",
    "relation":[{"pid": "ITEM_1", "id": "ITEM_1_1"},
          {"pid": "ITEM_2", "id": "ITEM_2_2"}]
  }, {
    "type": "size",
    "relation":[{"pid": "DEFAULT_0", "id": ["DEFAULT_0_1","DEFAULT_0_2"]}]
  }
]

Thanks. 
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Thanks Abrar's answer.  I adjust it slightly for grouping the same pid items and get the result I want.  But there should be a better way to do this?  
const arr = [
  {"type":"color","pid":"ITEM_1","id":"ITEM_1_1"},
  {"type":"color","pid":"ITEM_2","id":"ITEM_2_2"},
  {"type":"size","pid":"DEFAULT_0","id":"DEFAULT_0_1"},
  {"type":"size","pid":"DEFAULT_0","id":"DEFAULT_0_2"}
];

const resultArr = [];
const groups =[];
arr.forEach((data) => {
  let type = data.type;
  let newArr = arr.filter(el => el.type === type);
  let resObj = {
    "type": type,
    "relation": []
  };

  newArr.forEach(el => {
    groups.push({"pid": el.pid, "id": el.id});
  });

            var group_to_values = groups.reduce(function(obj, item) {
                obj[item.pid] = obj[item.pid] || [];
                obj[item.pid].push(item.id);
                return obj;
            }, {});
            resObj.relation.push(group_to_values);

  if (resultArr.map(e => e.type).indexOf(type) < 0) {
    resultArr.push(resObj);
  }
})

console.log(resultArr); 

A:

I have refactored your code and now it looks like this - 
const arr = [
  {"type":"color","pid":"ITEM_1","id":"ITEM_1_1"},
  {"type":"color","pid":"ITEM_2","id":"ITEM_2_2"},
  {"type":"size","pid":"DEFAULT_0","id":"DEFAULT_0_1"},
  {"type":"size","pid":"DEFAULT_0","id":"DEFAULT_0_2"}
];

const resultArr = [];
arr.forEach((data) => {
  let type = data.type;
  let newArr = arr.filter(el => el.type === type);
  let resObj = {
    "type": type,
    "relation": []
  };
  newArr.forEach(el => {
    resObj.relation.push({"pid": el.pid, "id": el.id});
  });

  if (resultArr.map(e => e.type).indexOf(type) < 0) {
    resultArr.push(resObj);
  }
})

console.log(resultArr); //resultArr contains your desired output

Basically I have filtered out the keys from the array based on the type since that has to be unique (as per your desired output).  This should be pretty straightforward and won't require frameworks or even jQuery. 