Table cell value is json, how to beautify, indent?

Ignition
1

I have a dataset with json string column.

I want to display the json string in beautify form.

What I’ve tried:

Convert dataset to list of dictionary, and use json dump to beautify string.

Note: I do not want to use embed view, as embed view doesn’t adjust row height automatically.

Before:

image

But below is output

image
image455×103 2.13 KB

Expected:

image
image222×266 2.48 KB

2

Your "expected" output shows syntax highlighting. If you want that then I think you're going to have to use a Markdown component and that will require a view rendering.

Also, please see Wiki - how to post code on this forum. To test your sample JSON we have to type it all out because you've posted it as images.

1 Like
3

I stand corrected.

Input data from dataset/list of dictionary:

{"name":"John","age":30,"city":"New York","skills":["Python","JavaScript","SQL"]}

desired output on table:

{
  "name": "John",
  "age": 30,
  "city": "New York",
  "skills": [
    "Python",
    "JavaScript",
    "SQL"
  ]
}

I do not need text highlighting, my bad. I was thinking if I can apply a style to this column. But don’t know the right CSS.

Any idea how to display the above on a table component?

4
  • Create a Flex View, jsonMarkdownView. Check that PROPS.direction : column.
  • Create a parameter,
    value: {"name":"John","age":30,"city":"New York","skills":["Python","JavaScript","SQL"]}
    This will be the value of the json column passed to the view.
  • Add a Markdown component.
  • On the Markdown create an expression binding,
    jsonDecode({view.params.value}) (See Paul's comment below! This removes the need for the script transform in my original post.)
"```json\n" + jsonFormat(jsonDecode({view.params.value})) + "\n```\n"

You should now have a view that renders like this:

image
image306×181 2.77 KB

  • Note that I've added the json instruction into the code block backticks in the hope that it would apply syntax highlighting as it would on the forum. It doesn't, but it's no harm to leave it in there in case the Markdown component is upgraded.

  • When finished editing the view, set the view height to less than the default table row height. 30 should do. The rendered view will now expand to the right size to show the contents. Thanks to @kgamble for this tip on Flex container and determining auto basis size - #3 by kgamble.

Now back to the table view.

  • On the rendered view column set,
    column.x.render : view
    column.x.viewpath : jsonMarkdownView (select from the dropdown).

That should do it.
Have fun.

2 Likes
5

Psst:

4 Likes
6

Thank you for the detailed and concise instruction. Specially on set Markdown basis to “auto” and trying to apply syntax highlighting as json.

It would be prettier if markdown component will accept language syntax highlighting.