重新排列 JSON 对象以在 jspdf-autotable 中显示

Question

我有以下对象，需要重新排列。请帮助我将其从以下格式转换。我正在从 Web 服务接收 Json 数组。我需要在 japdf-autotable 中显示。我能够格式化 table 并猜测以下数据结构应该可以工作。

如果谁有更好的想法也可以提出来。

[
    {
        "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
    }
]

我需要以下格式。

[
    {
        "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
            }
        ]
    }
]

Answer 1

您可以使用 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);

重新排列 JSON 对象以在 jspdf-autotable 中显示

Rearrange JSON object to show in jspdf-autotable

javascript

json

reactjs

object

jspdf-autotable