Angular add different style to a JSON - json

Question

From BE it returns a json and I show it, but I would like, for example, "type, includeDeactive, code etc..." be bold and the (other) value, after the colons (:) in italics.
Example:
body: { "**type**: { **includeDeactive**: *false*, **code**: *null*, **address**: *null*, **name**: *null*, }
I've already formatted the json with the <pre> tag and I pass it data with the data binding {{detail.body | json }}. This is my html:
<mat-label style="font-family: Roboto">
<strong>Body</strong>:
<span style="font-family: Roboto">
<pre id="formatJson"> {{detail.body | json }} </pre>
</span>
</mat-label>
This is my function in ts:
objBody: any;
parsedObj: any;
constructor(
private dialogRef: MatDialogRef<DettaglioAuditComponent>,
#Inject(MAT_DIALOG_DATA) public data,
private auditService: AuditService,
) { }
ngOnInit(): void {
this.detail = {};
this.auditService.getDetails(this.data.element).then(
(value) => {
this.detail = value;
var objBody = JSON.stringify(this.detail.body);
var parsedObj = JSON.parse(objBody);
//objBody = objBody.replace('{"', '{"<b>'); - already tried but doesn't work!
//objBody = objBody.replace('":', '</b>":');
this.loading = false;
},
(error) =>
});
}
Any idea? Thanks in advance!

Answer 1

If you need it for professional purpose and "just want it to work", use Highlightjs or an equivalent library. The output will be fancy and very readable :
If you want to do it with Highlightjs
You need highlightJs of course. You can use the npm dependency ngx-highlight-js which will enable you to use HighlightJs in an Angular project.
In the Angular project, you can include the content like this :
<textarea highlight-js ngNonBindable lang="javascript">
// include your content here
</textarea>
You MUST include the content in a <textarea> tag (for indentation preservation)
highlight-js is of course the directive that will tell HighlightJs to do its work
ngNonBindable prevents Angular from trying to interpret the content of the textArea as Angular code
lang="javascript" : you can optionally specify the language for accurate coloration
Also, don't forget to import the HighlightJsModule module where necessary
If you want to do it by yourself
(or understand how things work under the hood)
You can JSON.parse() the content of your string, recursively iterate on the given object keys and generate HTML out of it.
Indentations and newlines can be rendered by placing the generated html in a <pre> pr <textarea> tag
Colors can be achieved by placing colored elements in dedicated <span class="[...]"> tags
On the previous example, the HTML code generated by HighlightJS is :
<pre><code class="language-json hljs">[
{
<span class="hljs-attr">"title"</span>: <span class="hljs-string">"apples"</span>,
<span class="hljs-attr">"count"</span>: [<span class="hljs-number">12000</span>, <span class="hljs-number">20000</span>],
<span class="hljs-attr">"description"</span>: {<span class="hljs-attr">"text"</span>: <span class="hljs-string">"..."</span>, <span class="hljs-attr">"sensitive"</span>: <span class="hljs-literal">false</span>}
},
{
<span class="hljs-attr">"title"</span>: <span class="hljs-string">"oranges"</span>,
<span class="hljs-attr">"count"</span>: [<span class="hljs-number">17500</span>, <span class="hljs-literal">null</span>],
<span class="hljs-attr">"description"</span>: {<span class="hljs-attr">"text"</span>: <span class="hljs-string">"..."</span>, <span class="hljs-attr">"sensitive"</span>: <span class="hljs-literal">false</span>}
}
]
</code></pre>
Relevant pieces of code :
Convert the content to an object with JSON.parse(contentAsString)
Check if a given property is an array with Array.isArray(obj)
Iterate on object keys with Object.keys(obj)