Array of objects to table rows and columns

Question

is there any javascript library available to convert the nested array of object to table rows and columns...

sample data..

 [
  {
    "headerName": "Product"
  },
  {
    "headerName": "Sale Rate",
    "children": [
      {
        "headerName": "Sales",
        "children": [
          {
            "headerName": "Last Year Sale"
          },
          {
            "headerName": "This Year Sale"
          }
        ]
      },
      {
        "headerName": "Profits",
        "children": [
          {
            "headerName": "Last Year Profit"
          },
          {
            "headerName": "This Year Profit"
          }
        ]
      }
    ]
  }
]

need to build the below table structure(row, column along with row and col span) from the data

<table>
  <tr>
    <th rowspan="3">Product</th>
    <th colspan="4">Sale Rate</th>
  </tr>
  <tr>
    <th colspan="2">Sales</th>
    <th colspan="2">Profits</th>
  </tr>
  <tr>
    <th>Last Year Sale</th>
    <th>This Year Sale </th>
    <th>Last Year Profit</th>
    <th>This Year Profit</th>
  </tr>
</table>

what i tried so far https://codesandbox.io/s/modest-booth-inhzvm

struggling to get the column and row span from data

Does this answer your question? [Convert json data to a html table](https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) — robere2, Feb 02 '23 at 19:51
@robere2 no, my data structure is nested objects...need to build rows and columns(along with row and col span) from nested array of object.. — Ashokbharathi, Feb 03 '23 at 04:17
The data structure used in your question may be different from theirs, however I believe the same concepts apply, no? The code there can be modified to match your data structure. If you're having trouble with any particular concept then you should perhaps edit your question to add more details about what problem you're facing and how you've tried to solve it. — robere2, Feb 03 '23 at 05:30
@robere2 updated the question with codesandbox that i tried... — Ashokbharathi, Feb 07 '23 at 17:30
@Ashokbharathi It looks like you might need to walk the tree and create nested tables. You'll need to drill down your data and if the data has descendants call it recursively. — 1.21 gigawatts, Feb 08 '23 at 17:19

1.21 gigawatts · Answer 1 · 2023-02-08T21:04:38.307

I don't know if there is a library that does this.

I looked at your example code and you might be able to use it with slight modifications.

When you are parsing your data check if you have sub level data and if so then create a nested table. Call your original function on the nested data.

Here is an example you will have to adapt it to your use case:

function walkDownTree(data, callback, value = null) {
  callback(data, value);

  if (data.children.length) {
    var items = data.children;

    for (var i=0;i<items.length;i++) {
      let item = items[i];

      walkDownTree(item, callback, value);
    }
  }
}

function logItems(item) {
   console.log(item.nodeName)
}

var results = walkDownTree(data, logItems);

The third parameter is an optional parameter sometimes used to keep track of state data.

walkDownTree(document.body, logItems, count++);

Array of objects to table rows and columns

1 Answers1