Javascript 将分组查询转换为对象树

Javascript 将分组查询转换为对象树,javascript,vue.js,treeview,pivot-table,Javascript,Vue.js,Treeview,Pivot Table,我想将查询结果转换为js中的树对象,查询的每个字段都添加到js文件中的数组中,如['field2','field3'],因此后端使用它创建动态查询,树必须从左到右从最外部到最内部的字段创建(查询也按字段id进行分组),这是查询(请记住,字段是动态的,因此会添加更多字段),树的最后一个分支应该是数量(也是动态的) 这会给我一组这样的数据 'Group 1', 'Data 0', '9172' 'Group 1', 'Data 1', '789' 'Group 1', 'Data 22', '289

我想将查询结果转换为js中的树对象,查询的每个字段都添加到js文件中的数组中,如
['field2','field3']
,因此后端使用它创建动态查询,树必须从左到右从最外部到最内部的字段创建(查询也按字段id进行分组),这是查询(请记住,字段是动态的,因此会添加更多字段),树的最后一个分支应该是数量(也是动态的)

这会给我一组这样的数据

'Group 1', 'Data 0', '9172'
'Group 1', 'Data 1', '789'
'Group 1', 'Data 22', '289'
'Group 1', 'Data 3', '254'
'Group 1', 'Data 4', '197'
'Group 1', 'Data 55', '173'
'Group 2', 'Data 0', '38'
'Group 2', 'Data 11', '3'
'Group 2', 'Data 4', '4'
'Group 3', 'Data 0', '807'
'Group 3', 'Data 1', '40'
'Group 3', 'Data 18', '4'
'Group 3', 'Data 2', '35'
我需要做的是把它变成这样

[
  {
    field2: 'Group 1',
    data: [
      {
        field3: 'Data 0',
        data: [
          { quatity: 9172 },
        ],
      },
      {
        field3: 'Data 1',
        data: [
          { quatity: 789 },
        ],
      },
      {
        field3: 'Data 3',
        data: [
          { quatity: 289 },
        ],
      },
      {
        field3: 'Data 4',
        data: [
          { quatity: 197 },
        ],
      },
      {
        field3: 'Data 55',
        data: [
          { quatity: 173 },
        ],
      },
    ],
  },
  {
    field2: 'Group 2',
    data: [
      {
        field3: 'Data 0',
        data: [
          { quatity: 38 },
        ],
      },
      {
        field3: 'Data 11',
        data: [
          { quatity: 3 },
        ],
      },
      {
        field3: 'Data 4',
        data: [
          { quatity: 4 },
        ],
      },
    ],
  },
  {
    field2: 'Group 3',
    data: [
      {
        field3: 'Data 0',
        data: [
          { quatity: 807 },
        ],
      },
      {
        field3: 'Data 1',
        data: [
          { quatity: 40 },
        ],
      },
      {
        field3: 'Data 18',
        data: [
          { quatity: 4 },
        ],
      },
      {
        field3: 'Data 2',
        data: [
          { quatity: 35 },
        ],
      },
    ],
  },
]
这里的诀窍是查询中的字段是动态的,因此我需要继续查找,直到它到达列表中的最后一个字段,因此如果字段数组具有类似
['field2'、'field3'、'field4']
的项,并且值数组具有类似
['quantity'、'balance']
结果应该是这样的

[
  {
    field2: 'Group 1',
    data: [
      {
        field3: 'Data 0',
        data: [
          {
            field4: 'Last field,
            data: [
              { quantity: 3435, balance: 43.53 },
            ],
          },
          {
            field4: 'Last field,
            data: [
              { quantity: 234, balance: 241.53 },
            ],
          },
        ],
      },
    ],
  },
]

如何实现这一点?

您可以采用组合方法,使用键和值数组查找相同的对象

var数据=['第一组','数据0','9172'],['第一组','数据1','789'],['第一组','数据3','数据254'],['第一组','数据4','197'],['第一组','数据55','173'],['第二组','数据0','38'],['第二组','数据11','3'],['第二组','数据4'],['第三组','数据0','807'],['第三组','数据1','40'],[‘第三组’、‘数据18’、‘数据4’]、[‘第三组’、‘数据2’、‘数据35’],
键=['field2','field3'],
值=[“数量”],
结果=数据。减少((r,a)=>{
钥匙
.减少((q,k,i)=>{
var temp=q.find(o=>o[k]==a[i]);
如果(!temp)q.push(temp={[k]:a[i],数据:[]});
返回温度数据;
},r)
.push(Object.assign({},…values.map((k,i)=>({[k]:a[keys.length+i]}));
返回r;
}, []);
console.log(结果);
。作为控制台包装{最大高度:100%!重要;顶部:0;}
[
  {
    field2: 'Group 1',
    data: [
      {
        field3: 'Data 0',
        data: [
          {
            field4: 'Last field,
            data: [
              { quantity: 3435, balance: 43.53 },
            ],
          },
          {
            field4: 'Last field,
            data: [
              { quantity: 234, balance: 241.53 },
            ],
          },
        ],
      },
    ],
  },
]