reactjs - How to construct a final array in Javascript

Question

I have an array as :

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

and the columns are dynamic:

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

So,if there are 5 ids like 101, 102, 103, 104, and 105, then columns will be:

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

I am able to construct the dynamic column headers but unable to construct the rows. I am trying to show this data in ReactTable like :

Any help would be appreciated!

question from:https://stackoverflow.com/questions/65923613/how-to-construct-a-final-array-in-javascript

Answer 1

Given we need to group by (table, column, constraint) common values, We could use it as unique stringified key at some dataMap object. This object will group accordingly each pair value numberColumn.

After doing its map iteraction we join together the stringified keys with its values. We parse the keys back to objects.

Finally, we can sort (based on image) by its length.

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))