如何在 Javascript 中构造最终数组答案

【问题标题】：How to construct a final array in Javascript如何在 Javascript 中构造最终数组
【发布时间】：2021-05-01 13:13:54
【问题描述】：

我有一个数组：

result = [
          { 101: {type: "A"},
            table: "Employee",
            column: "emp_id",
            constraint: "unique"
           },
          { 101: {type: "B"},
            table: "Employee",
            column: "emp_id",
            constraint: "not_null"
           },
          { 101: {type: "B"},
            table: "Employee",
            column: "name",
            constraint: "unique"
           },
          { 102: {type: "A"},
            table: "Employee",
            column: "emp_id",
            constraint: "unique"
           },
          { 102: {type: "B"},
            table: "Employee",
            column: "name",
            constraint: "unique"
           },
          { 103: {type: "B"},
            table: "Employee",
            column: "emp_id",
            constraint: "unique"
           },
         ];

并且列是动态的：

columns = [
           {Header: "Table", accessor: "table"},
           {Header: "Column", accessor: "column"},
           {Header: id, accessor: id}
           ];

所以，如果有 5 个 id，例如 101、102、103、104 和 105，那么列将是：

columns = [
           {Header: "Table", accessor: "table"},
           {Header: "Column", accessor: "column"},
           {Header: 101, accessor: 101},
           {Header: 102, accessor: 102},
           {Header: 103, accessor: 103},
           {Header: 104, accessor: 104},
           {Header: 105, accessor: 105},
           ];

我能够构造动态列标题但无法构造行。 我试图在 ReactTable 中显示这些数据，例如：

任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs react-redux react-table

【解决方案1】：

鉴于我们需要按（表、列、约束）公共值进行分组，我们可以将其用作某个 dataMap 对象的唯一字符串化键。该对象将相应地分组每个对值numberColumn。

在完成映射迭代后，我们将字符串化的键与其值连接在一起。我们将键解析回对象。

最后，我们可以（基于图像）按长度排序。

result = [
  { 101: {type: "A"},
    table: "Employee",
    column: "emp_id",
    constraint: "unique"
   },
  { 101: {type: "B"},
    table: "Employee",
    column: "emp_id",
    constraint: "not_null"
   },
  { 101: {type: "B"},
    table: "Employee",
    column: "name",
    constraint: "unique"
   },
  { 102: {type: "A"},
    table: "Employee",
    column: "emp_id",
    constraint: "unique"
   },
  { 102: {type: "B"},
    table: "Employee",
    column: "name",
    constraint: "unique"
   },
  { 103: {type: "B"},
    table: "Employee",
    column: "emp_id",
    constraint: "unique"
   },
 ];

const buildData = (result) => {
  // dataMap will have unique keys to group by 'table', 'column', 'constraint'
  const dataMap = {};
  result.forEach(({ table, column, constraint, ...type }) => {
    // we create a key with stringify
    const key = JSON.stringify({table, column, constraint})
    // type entries return will be lile [[ '101', { type: 'B' } ]]
    const [number, typeObj] = Object.entries(type)[0]

    const newType = {[number]: typeObj.type }
    // if there is no type to that key yet we return the object, otherwise add the new one
    dataMap[key] = !dataMap[key] ? newType : { ...dataMap[key], ...newType } 
  });

  // here we join stringified values with numbered Columns
  const data = Object.entries(dataMap).map(([ stringfiedCommonColumns, numberedColumns ]) => {
    const commonColumns = JSON.parse(stringfiedCommonColumns)
    return { ...commonColumns, ...numberedColumns }
  })

  // here we sort by length (it seems that it's in your interest)
  const dataSorted = data.sort((a, b) => Object.keys(a).length < Object.keys(b).length ? 1 : -1)
  return dataSorted
}

console.log(buildData(result))

【讨论】：