javascriptjsonreactjsobjectjspdf-autotable

Rearrange JSON object to show in jspdf-autotable


I have following object, which I need to rearrange. Please help me to convert it from following format. I am receiving th Json array from web service. I need to show in japdf-autotable. I have able to format the table and guese the following data structure should work.

If someone have better ideas also can suggest me.

enter image description here

[
    {
        "location": "OFFICE",
        "designation": "SWEETS",
        "name": "BHOROT DOLUI",
        "salary": 9500
    },
    {
        "location": "FACTORY",
        "designation": "DRIVER",
        "name": "SOUMEN PAL",
        "salary": 10000
    },
    {
        "location": "OFFICE",
        "designation": "STAFF",
        "name": "NANDU YADAV",
        "salary": 11000
    },
    {
        "location": "OUTLETS",
        "designation": "DRIVER",
        "name": "PANKAJ YADAV",
        "salary": 10200
    },
    {
        "location": "OFFICE",
        "designation": "DRIVER",
        "name": "AJIT YADAV",
        "salary": 9100
    },
    {
        "location": "OFFICE",
        "designation": "DRIVER",
        "name": "AVIJIT BHOWMICK",
        "salary": 9500
    },
    {
        "location": "OUTLETS",
        "designation": "SWEETS",
        "name": "ARUN DAS",
        "salary": 10200
    },
    {
        "location": "FACTORY",
        "designation": "STAFF",
        "name": "RAJESH KUMAR YADAV",
        "salary": 18000
    },
    {
        "location": "OFFICE",
        "designation": "DRIVER",
        "name": "AMIT RAM",
        "salary": 9000
    },
    {
        "location": "OUTLETS",
        "designation": "SALES BOY",
        "name": "RAKESH HAZRA",
        "salary": 9500
    },
    {
        "location": "FACTORY",
        "designation": "DRIVER",
        "name": "MD AKHTER",
        "salary": 9000
    }
]

I need to the following format.

[
    {
        "location": "OFFICE",
        "designation": "SWEETS",
        data: [
            {
                "location": "OFFICE",
                "designation": "SWEETS",
                "name": "BHOROT DOLUI",
                "salary": 9500
            }
        ],
    },
    {
        "location": "OFFICE",
        "designation": "DRIVER",
        "data": [
            {
                "location": "OFFICE",
                "designation": "DRIVER",
                "name": "AJIT YADAV",
                "salary": 9100
            },
            {
                "location": "OFFICE",
                "designation": "DRIVER",
                "name": "AVIJIT BHOWMICK",
                "salary": 9500
            },
            {
                "location": "OFFICE",
                "designation": "DRIVER",
                "name": "AMIT RAM",
                "salary": 9000
            },
        ]
    },
    {
        "location": "OFFICE",
        "designation": "STAFF",
        "data": [
            {
                "location": "OFFICE",
                "designation": "STAFF",
                "name": "NANDU YADAV",
                "salary": 11000
            },
        ]
    },
    {
        "location": "FACTORY",
        "designation": "DRIVER",
        "data": [
            {
                "location": "FACTORY",
                "designation": "DRIVER",
                "name": "SOUMEN PAL",
                "salary": 10000
            },
            {
                "location": "FACTORY",
                "designation": "DRIVER",
                "name": "MD AKHTER",
                "salary": 9000
            }
        ]
    },
    {
        "location": "FACTORY",
        "designation": "STAFF",
        "data": [
            {
                "location": "FACTORY",
                "designation": "STAFF",
                "name": "RAJESH KUMAR YADAV",
                "salary": 18000
            }
        ]
    },
    {
        "location": "OUTLETS",
        "designation": "DRIVER",
        "data": [
            {
                "location": "OUTLETS",
                "designation": "DRIVER",
                "name": "PANKAJ YADAV",
                "salary": 10200
            },
        ]
    },
    {
        "location": "OUTLETS",
        "designation": "SWEETS",
        "data": [
            {
                "location": "OUTLETS",
                "designation": "SWEETS",
                "name": "ARUN DAS",
                "salary": 10200
            }
        ]
    },
    {
        "location": "OUTLETS",
        "designation": "SALES BOY",
        "data": [
            {
                "location": "OUTLETS",
                "designation": "SALES BOY",
                "name": "RAKESH HAZRA",
                "salary": 9500
            }
        ]
    }
]

Solution

  • You can easily achieve this using reduce and find

    const arr = [
      {
        location: "OFFICE",
        designation: "SWEETS",
        name: "BHOROT DOLUI",
        salary: 9500,
      },
      {
        location: "FACTORY",
        designation: "DRIVER",
        name: "SOUMEN PAL",
        salary: 10000,
      },
      {
        location: "OFFICE",
        designation: "STAFF",
        name: "NANDU YADAV",
        salary: 11000,
      },
      {
        location: "OUTLETS",
        designation: "DRIVER",
        name: "PANKAJ YADAV",
        salary: 10200,
      },
      {
        location: "OFFICE",
        designation: "DRIVER",
        name: "AJIT YADAV",
        salary: 9100,
      },
      {
        location: "OFFICE",
        designation: "DRIVER",
        name: "AVIJIT BHOWMICK",
        salary: 9500,
      },
      {
        location: "OUTLETS",
        designation: "SWEETS",
        name: "ARUN DAS",
        salary: 10200,
      },
      {
        location: "FACTORY",
        designation: "STAFF",
        name: "RAJESH KUMAR YADAV",
        salary: 18000,
      },
      {
        location: "OFFICE",
        designation: "DRIVER",
        name: "AMIT RAM",
        salary: 9000,
      },
      {
        location: "OUTLETS",
        designation: "SALES BOY",
        name: "RAKESH HAZRA",
        salary: 9500,
      },
      {
        location: "FACTORY",
        designation: "DRIVER",
        name: "MD AKHTER",
        salary: 9000,
      },
    ];
    
    const result = arr.reduce((acc, curr) => {
      const { location, designation, name, salary } = curr;
      const findEl = acc.find((o) => o.designation === designation && o.location === location);
      if (findEl) {
        findEl.data.push(curr);
      } else {
        acc.push({ location, designation, data: [{ ...curr }] });
      }
      return acc;
    }, []);
    
    console.log(result);