constantin-p / cp-react-tree-table

A fast, efficient tree table component for ReactJS.
https://constantin.software/cp-react-tree-table
MIT License
94 stars 27 forks source link

Converting data to required format. #18

Closed praveennetcity closed 5 years ago

praveennetcity commented 5 years ago

Do you any utility function to convert the normal hierarchical tree json structure to the component supported format

For Ex if i have a Sample JSON

[ { name: 'Company I', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs', children : [ { name: 'Group beta', expenses: '10,000', employees: '6', contact: 'Camila Devonport' }, { name: 'Group gamma', expenses: '40,000', employees: '4', contact: 'Violet Curtis' },

            ]

    }

]
constantin-p commented 5 years ago

Hi,

If I understand your question, your initial format doesn't nest properties inside the data property.

You start with the following structure:

[
  { name: 'Company I', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs',
    children : [
      { name: 'Group beta', expenses: '10,000', employees: '6', contact: 'Camila Devonport' },
      { name: 'Group gamma', expenses: '40,000', employees: '4', contact: 'Violet Curtis' },
    ]
  }
]

and cp-react-tree-table accepts the following format:

[
  { data: { name: 'Company I', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs' },
    children : [
      { name: 'Group beta', expenses: '10,000', employees: '6', contact: 'Camila Devonport' },
      { name: 'Group gamma', expenses: '40,000', employees: '4', contact: 'Violet Curtis' },
    ]
  }
]

The following code should convert your format:

const RAW_DATA = [
  { name: 'Company I', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs',
    children : [
      { name: 'Group beta', expenses: '10,000', employees: '6', contact: 'Camila Devonport' },
      { name: 'Group gamma', expenses: '40,000', employees: '4', contact: 'Violet Curtis' },
    ]
  }
];

const processNode = (rawNode) => {
  const processedNode = { data: {} };

  // Data
  const keys = Object.keys(rawNode).filter((key) => (key !== 'children') && (key !== 'height'));
  keys.forEach((key) => {
    processedNode.data[key] = rawNode[key];
  });

  // Height
  if (rawNode.height != null) {
    processedNode.height = height;
  }

  // Children
  if (rawNode.children != null && rawNode.children.length > 0) {
    processedNode.children = [];
    for (let i = 0; i < rawNode.children.length; i++) {
      processedNode.children.push(processNode(rawNode.children[i]));
    }
  }

  return processedNode;
}

const PROCESSED_DATA = RAW_DATA.map((node) => processNode(node));
// PROCESSED_DATA has the structure required by cp-react-tree-table
praveennetcity commented 5 years ago

@constantin-p it worked perfectly Thanks :)