Javascript 如何格式化包含空行的excel文件，使其具有嵌套数组并匹配需要呈现的JSON对象？

我面临excel文件的问题。我从数据库收到一些数据，用户应该能够用如下所示的电子表格替换这些数据：

以下是数据来自数据库的方式以及excel文件的最终格式：

                "employers": [{
                    "id": "4147199311345513",
                    "shifts": [{
                        "url": "https://zoom.com/983493unsdkd/",
                        "days": "Mon,Tue,Wed,Thu,Fri",
                        "name": "Morning",
                        "endTime": "12:00",
                        "timezone": "CST",
                        "startTime": "8:00"
                    }, {
                        "url": "https://zoom.com/983493unsdkd/",
                        "days": "Mon,Tue,Wed,Thu,Fri",
                        "name": "Afternoon",
                        "endTime": "12:00",
                        "timezone": "CST",
                        "startTime": "8:00"
                    }],
                    "employerUrl": "http://www.google.com",
                    "employerName": "AT&T",
                    "employerUrlText": "URL Text",
                    "employerLogoSmall": "assets/images/att-logo.png",
                    "employerDescription": "AT&T is a world premier employer with a bunch of stuff here and there."
                }, {
                    "id": "3763171269270198",
                    "shifts": [{
                        "url": "https://zoom.com/983493unsdkd/",
                        "days": "Mon,Tue,Wed,Thu,Fri",
                        "name": "Morning",
                        "endTime": "12:00",
                        "timezone": "CST",
                        "startTime": "8:00"
                    }, {
                        "url": "https://zoom.com/983493unsdkd/",
                        "days": "Mon,Tue,Wed,Thu,Fri",
                        "name": "Afternoon",
                        "endTime": "12:00",
                        "timezone": "CST",
                        "startTime": "8:00"
                    }],
                    "employerUrl": "http://www.google.com",
                    "employerName": "AT&T",
                    "employerUrlText": "URL Text",
                    "employerLogoSmall": "assets/images/att-logo.png",
                    "employerDescription": "AT&T is a world premier employer with a bunch of stuff here and there."
                }]

所以我需要把这个电子表格格式化成上面的JSON格式。所有这些都是通过Javascript/React实现的

这是迄今为止我用来格式化excel文件并进行渲染的内容：

  const [excelData, setExcelData] = useState({ rows: [], fileName: "" });

  const fileHandler = (event) => {
    let fileObj = event.target.files[0];

    ExcelRenderer(fileObj, (err, resp) => {
      if (err) {
        console.log(err);
      } else {
        let newRows = [];
        let shiftRows = [];
        console.log(resp.rows);
        resp.rows.slice(1).map((row, index) => {
          if (row && row !== "undefined") {
            return newRows.push({
              key: index,
              employer: {
                name: row[0],
                description: row[1],
                employerUrl: row[2],
                employerUrlText: row[3],
                shifts: shiftRows.push({ shift: row[2] }),
              },
            });
          }

          return false;
        });

        setExcelData({ rows: newRows, fileName: fileObj.name });
      }
    });
  };

上面的console.log（console.log（resp.rows））返回以下内容： 其中第一行是excel文件的标题

上面的代码是这样结束的，应该和我提到的JSON完全一样：

      rows: [
        {
          key: 0,
          employer: {
            name: 'AT&T',
            description: 'AT&T is a world premier employer with a bunch of stuff here and there.',
            shifts: 1
          }
        },
        {
          key: 1,
          employer: {
            shifts: 2
          }
        },
        {
          key: 2,
          employer: {
            shifts: 3
          }
        },
        {
          key: 3,
          employer: {
            shifts: 4
          }
        },
        {
          key: 4,
          employer: {
            name: 'Verizon',
            description: 'Verizon is a world premier employer with a bunch of stuff here and there.',
            shifts: 5
          }
        },
        {
          key: 5,
          employer: {
            shifts: 6
          }
        },
        {
          key: 6,
          employer: {
            shifts: 7
          }
        },
        {
          key: 7,
          employer: {
            shifts: 8
          }
        }
      ],
      fileName: 'EmployerChats.xlsx',
      false: {
        rows: [
          {
            url: 'https://www.youtube.com/kdfjkdjfieht/',
            title: 'This is a video',
            thumbnail: '/assets/images/pages/5/links/0/link.png',
            description: 'This is some text'
          },
          {
            url: 'https://www.youtube.com/kdfjkdjfieht/',
            title: 'This is a video',
            thumbnail: '/assets/images/pages/5/links/1/link.png',
            description: 'This is some text'
          }
        ]
      },

我正在使用此插件帮助我呈现excel文件：

关于如何将电子表格数据格式化为JSON，有什么想法吗

请注意那些空行

例如，每次有一个新的雇主名称，即数组中的新行或项目，则Shift name下面和之后的所有列和行都是一个新的嵌套对象数组。因此，该文件包含一个长度为2的数组，然后在其命中Shift Name列时包含另一个项目数组

---

清楚吗？

首先-您不需要遵循“原始”，基于类的

设置状态。在FC中，您只需使用两个独立的
useState

const [rows, setRows] = useState([]);
const [fileName, setFileName] = useState("");

数据转换
我知道您需要一点不同的工作流，但这也很有用（公共点-数据结构）-作为转换指南，请继续阅读

您不需要使用
ExcelRenderer
对来自db的数据进行操作并将其呈现为图纸。转换后的数据可以稍后导出到文件中

您只需创建符合预期视图的数组（aoa）（行=行单元格数组）。为此，您需要非常简单的算法：


让newData=[]
为每个（
emp
）映射员工：


设置标志
let first=true

映射每个班次（
shift
）的班次：


if（first）{newData.push（[emp.name，emp.descr，shift.name，shift.timezone…]）；first=false；
}else newData.push（[null，null，shift.name，shift.timezone…]）


setRows（newData）



翻译
操作
数据
和
立柱
支柱-结构类似于数据
是我们的
行
，我们只需要
列的`属性，只是另一个状态值：

const [columns, setColumns] = useState([
  { name: "Employer name", key: 0 },
  { name: "Employer description", key: 1 },
  { name: "Shift name", key: 2 },
  // ...
]);

最后我们可以渲染它

return (
  <OutTable data={rows] columns />

有很多方法可用于转换-参见示例

回到你的需要
我们从db加载数据，数据以aoa形式呈现，呈现为工作表。我不完全理解你们需要的格式，但你们的db格式转换很简单（和上面相反），你们可以按照它来调整你们的需要

let newEmployers = [];
let empCounter = -1;
// itarate on rows, on each (`row`):
rows.map( (row) => {
  // new employer
  if( row[0] ) { 
    newEmployers.push( {
      // id should be here
      "employerName": row[0],
      "employerDescription": row[1],
      "shifts": [
        {
          "shiftName": row[3], 
          "shiftDescription": row[4], 
          // ...
        }
      ]
    } );
    empCounter ++;
  } else {
    // new shift for current employer
    newEmployers[empCounter].shifts.push(
      {
        "shiftName": row[3], 
        "shiftDescription": row[4], 
        // ...
      }
    );
  }
});

// newEmployers can be sent to backend (as json) to update DB

let newEmployers = [];
let empCounter = -1;
// itarate on rows, on each (`row`):
rows.map( (row) => {
  // new employer
  if( row[0] ) { 
    newEmployers.push( {
      // id should be here
      "employerName": row[0],
      "employerDescription": row[1],
      "shifts": [
        {
          "shiftName": row[3], 
          "shiftDescription": row[4], 
          // ...
        }
      ]
    } );
    empCounter ++;
  } else {
    // new shift for current employer
    newEmployers[empCounter].shifts.push(
      {
        "shiftName": row[3], 
        "shiftDescription": row[4], 
        // ...
      }
    );
  }
});

// newEmployers can be sent to backend (as json) to update DB