How to construct a final array in Javascript

user_14868273 0
Viewed 85

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 :

enter image description here

Any help would be appreciated!

react-redux react-table reactjs javascript
1 Answers

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

user_92381340
Related