JSFiddle - React, Tailwind, and code Playground

by SathyaHere

JavaScript

const data = {
  "totalRec": 5,
  "response": [
  {
      "employee": {
        "uid": 1,
        "empName": "Jade"
      },
      "location": {
        "country": "UK",
        "subLocation": "London"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 2,
        "empName": "Mike"
      },
      "location": {
        "country": "UK",
        "subLocation": "Manchester"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Liya"
      },
      "location": {
        "country": "UK",
        "subLocation": "Southampton"
      },
      "department": {
        "sector": "HR"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Brad"
      },
      "location": {
        "country": "USA",
        "subLocation": "Texas"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Brad"
      },
      "location": {
        "country": "USA",
        "subLocation": "Texas"
      },
      "department": {
        "sector": "NON-IT"
      }
    }
  ]
};

const finalResponse = data.response.reduce((r, {
  location: {
    country: group
  },
  ...object
}) => {
  r[group] = r[group] || {
    location: group,
    locationObj: []
  };
  r[group].locationObj.push(object);
  return r;
}, {});

console.log(finalResponse)