如何在 Javascript 中构建最终数组

Question

我有一个数组：

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},
           ];

我能够构建动态列headers但无法构建行。 我试图在 ReactTable 中显示此数据，例如：

如有任何帮助，我们将不胜感激！

Answer 1

鉴于我们需要按（table、列、约束）公共值进行分组，我们可以将其用作某些 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))

如何在 Javascript 中构建最终数组

How to construct a final array in Javascript

javascript

reactjs

react-redux

react-table