How to render nested data (tags structure) in grid

[pkz]

Hi,

I have the following structure for each row:

{
"_id": "2",
"symbol": "sym2",
"open_date": "2029-01-11",
"_type": "t2",
"currency": "EUR",
"quantity": 312,
"tags": [
{
"tag": "G3_TAG-ABC",
"group_name": "#0000ff",
},
{
"tag": "G2_TAG-DEF",
"group_name": "#00ff00",
},
{
"tag": "G_TAG3",
"group_name": "#ff0000",
}
],
},

 

How do I render the nested tag as a tags in each row? and if I want to assign a color to the tag based on group_name – how can I do that?

I tried get cell value based on this guide, but it does not work and instead it renders as objects as string:

{label: "tags", dataField: "tags", template: 'tags', width: 'auto', getCellValue: (id, dataField, data) => {
return data.tag;
}

 

How an I achieve G3_TAG-ABC, G2_TAG-DEF, G_TAG3 each with correct color?

 

[ivanpeevski]

Hi pkz,

 

“data” represents the entire row object. So to create tags, you can use:

return data.tags.map(el=>el.tag)

 

This transforms the cell value from an array of objects to a comma separated string.

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[pkz]

Hi,

I see this error:

I have shared this question as part of my email support request. I hope you can take a look at it.

[sarahcuneiform22]

To render nested data (tag structure) in a grid, you can use recursion or a hierarchical data structure.

Define your grid structure: Determine the columns and rows needed for your grid layout.

Prepare your nested data: Ensure that your nested data is in a suitable format, such as an array of objects with each object representing a tag and containing properties for the tag’s name, attributes, and child tags.

Implement a recursive function: Create a function that can iterate through the nested data and render each tag and its children. The function should take the current tag as input and generate the necessary HTML or UI elements for rendering.

Render the grid: Use your recursive function to iterate through the nested data and generate the grid elements dynamically. The function should handle cases where a tag has child tags by calling itself recursively to render the nested structure within the grid.

By using recursion or a hierarchical approach, you can traverse the nested data structure and render each tag and its children in the desired grid layout.

[Author]

Posts