js数据格式化求解决思路?

Question

现在有份表格数据，按照fields顺序分组处理后得到下边格式映射：

const tableData = [
    {bank: 'gfBank',werks: '5041',zquarter: 'quarter1',paper_money: '50',deposit: '50',edate: '2022-10',id: '82',},
    {bank: 'gfBank',werks: '3031', zquarter: 'quarter1',paper_money: '40',deposit: '40',edate: '2022-09',id: '81',},
    {bank: 'gfBank',werks: '1011',zquarter: 'quarter1',paper_money: '60',deposit: '60',edate: '2022-09',id: '80',},
    {bank: 'jsBank',werks: '1011',zquarter: 'quarter2',paper_money: '50',deposit: '50',edate: '2022-09',id: '79',},
    {bank: 'jsBank',werks: '1011',zquarter: 'quarter1',paper_money: '50',deposit: '50',edate: '2022-09',id: '78',},
    {bank: 'gfBank',werks: '3031',zquarter: 'quarter3',edate: '2022-12',paper_money: '900',deposit: '1000',id: '77',},
    {bank: 'gfBank',werks: '3031',zquarter: 'quarter3',edate: '2022-11',paper_money: '900',deposit: '1000',id: '76',},
    {bank: 'gfBank',werks: '3031',zquarter: 'quarter3',edate: '2022-10',paper_money: '900',deposit: '1000',id: '75',}
]
const fields = ['bank','zquarter','werks']
let map = {
    "gfBank": {
        "children": {
            "quarter1": {
                "children": {
                    "1011": {
                        "children": [
                            {"bank": "gfBank","werks": "1011","zquarter": "quarter1","paper_money": "60","deposit": "60","edate": "2022-09","id": "80"}
                        ],
                        "rowSpan": 1
                    },
                    "3031": {
                        "children": [
                            {"bank": "gfBank","werks": "3031","zquarter": "quarter1","paper_money": "40","deposit": "40","edate": "2022-09","id": "81"}
                        ],
                        "rowSpan": 1
                    },
                    "5041": {
                        "children": [
                            {"bank": "gfBank","werks": "5041", "zquarter": "quarter1", "paper_money": "50","deposit": "50","edate": "2022-10","id": "82"}
                        ],
                        "rowSpan": 1
                    }
                },
                "rowSpan": 6
            },
            "quarter3": {
                "children": {
                    "3031": {
                        "children": [
                            {"bank": "gfBank","werks": "3031","zquarter": "quarter3","edate": "2022-12","paper_money": "900", "deposit": "1000","id": "77"},
                            {"bank": "gfBank","werks": "3031","zquarter": "quarter3","edate": "2022-11", "paper_money": "900", "deposit": "1000","id": "76"},
                            {"bank": "gfBank", "werks": "3031", "zquarter": "quarter3","edate": "2022-10","paper_money": "900","deposit": "1000","id": "75"}
                        ],
                        "rowSpan": 3
                    }
                },
                "rowSpan": 4
            }
        },
        "rowSpan": 12
    },
    "jsBank": {
        "children": {
            "quarter2": {
                "children": {
                    "1011": {
                        "children": [
                            {"bank": "jsBank","werks": "1011","zquarter": "quarter2","paper_money": "50","deposit": "50","edate": "2022-09", "id": "79"}
                        ],
                        "rowSpan": 1
                    }
                },
                "rowSpan": 2
            },
            "quarter1": {
                "children": {
                    "1011": {
                        "children": [
                            {"bank": "jsBank","werks": "1011","zquarter": "quarter1","paper_money": "50","deposit": "50","edate": "2022-09", "id": "78"}
                        ],
                        "rowSpan": 1
                    }
                },
                "rowSpan": 2
            }
        },
        "rowSpan": 6
    }
}

现在代码情境模拟后是这样的：

// fields = ['bank','zquarter','werks']
fields.forEach((item,index)=>{
    for(let rec of tableData){
        // ...逻辑处理，根据表格数据，返回map中对应的rowSpan
        //比如数据是{"bank": "gfBank","werks": "5041", "zquarter": "quarter1", "paper_money": "50","deposit": "50","edate": "2022-10","id": "82"}
        // index==0,那么获取map.gfBank.rowSpan
        // index==1,获取map.gfBank.children.quarter1.rowSpan
        // index==2,获取map.gfBank.children.quarter1.children[5041].rowSpan
    }
})

应该是用到递归来写这部分代码，但是我想了一天还是写不出，望请教各位大佬这里该怎么写，好根据字段返回对应map中的rowSpan。

// 如果fields只有一个字段的情况下
fields = ['bank']
map = {
    "gfBank": {
        "children": [
            {"bank": "gfBank","werks": "5041","zquarter": "quarter1","paper_money": "50","deposit": "50","edate": "2022-10","id": "82"},
            {"bank": "gfBank","werks": "3031","zquarter": "quarter1","paper_money": "40","deposit": "40","edate": "2022-09","id": "81"},
            {"bank": "gfBank","werks": "1011","zquarter": "quarter1","paper_money": "60","deposit": "60","edate": "2022-09","id": "80"},
            {"bank": "gfBank","werks": "3031","zquarter": "quarter3","edate": "2022-12","paper_money": "900","deposit": "1000","id": "77"},
            {"bank": "gfBank","werks": "3031","zquarter": "quarter3","edate": "2022-11","paper_money": "900","deposit": "1000","id": "76"},
            {"bank": "gfBank","werks": "3031","zquarter": "quarter3","edate": "2022-10","paper_money": "900","deposit": "1000","id": "75"}
        ],
        "rowSpan": 6
    },
    "jsBank": {
        "children": [
            {"bank": "jsBank","werks": "1011","zquarter": "quarter2","paper_money": "50","deposit": "50","edate": "2022-09","id": "79"},
            {"bank": "jsBank","werks": "1011","zquarter": "quarter1","paper_money": "50","deposit": "50","edate": "2022-09","id": "78"}
        ],
        "rowSpan": 2
    }
}

Answer 1

是不是要获取某行数据所在的每个组的 rowSpan：

const getRowSpan = item => {
  let groups = map
  return Object.fromEntries(
    fields.map(field => {
      const { children, rowSpan } = groups[item[field]]
      groups = children
      return [field, rowSpan]
    })
  )
}

console.log(getRowSpan(tableData[0]))
console.log(getRowSpan(tableData[5]))

{
  bank: 12,
  zquarter: 6,
  werks: 1
}
{
  bank: 12,
  zquarter: 4,
  werks: 3
}

Answer 2

分组用 Lodash 的 groupBy

const fields = ["bank", "zquarter", "werks"];

function groupList(list, index) {
    const key = fields[index];
    if (!key) { return list; }

    return _(list).groupBy(key)
        .mapValues(list => ({ children: groupList(list, index + 1) }))
        .value();
}

const r = groupList(tableData, 0);

console.log(JSON.stringify(r, null, 2));

不过反正都要写 groupList 也可以自己写分组

function groupList(list, index) {
    const key = fields[index];
    if (!key) { return list; }

    var groups = list.reduce((groups, it) => {
        (groups[it[key]] ??= { children: [] }).children.push(it);
        return groups;
    }, {});

    for (key in groups) {
        groups[key].rowSpan = groups[key].children.length;
        groups[key].children = groupList(groups[key].children, index + 1);
    }
    return groups;
}