3

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!

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.