Format Json in TableCell using JSON.stringify()

Developer Support CMS Development
1

Hello,
I would like to format the json that I am displaying in a TableCell, now I am using just JSON.stringify() and the json is displayed but in one single line making the column too long, so I would like to format it to be displayed in multiple line (like a json itself). I tried to use JSON.stringify(e.response, null, 2) but it did not work. Also tried to use HTML native tags like “pre” but seems are not supported. Any ideas?
The code I tried was:

<TableRow key={rowIndex}>
{headerKeyPairs.map((pair, cellIndex) => (
<TableCell key={cellIndex} width='min'>
{ onRowClick ?
(<Button onClick={() => onClickWrapper(object, rowIndex)} variant={rowIndex == selectedIndex ? 'secondary' : 'transparent'} type="button" >
{(typeof object[pair.objectKey] === 'string' ? object[pair.objectKey] : JSON.stringify(object[pair.objectKey],null,2)) || 'N/A'}
</Button>)
: (typeof object[pair.objectKey] === 'string' ? object[pair.objectKey] : JSON.stringify(object[pair.objectKey],null,2)) || 'N/A'
}
</TableCell>
))}
</TableRow><p><span> </span></p>
2

Hey @GLopez13,

try the fromjson filter to build your table.

It should be possible to import the table like this:

{% set customJsonFile = 'URL-TO-JSON-FILE' %}

{{ customJsonFile|fromjson }}

best,

Anton