Displaying a block of JSON

Support
1

I’m trying to display a JSON string as a paragraph using {{model.contactDetails}} in a p tag. model.contactDetails looks like this: " Address: \rPO Box 21923 Safat\r13080 Kuwait City\rKuwait\r \r Tel: +965 249 59000\r Fax: +965 249 593 909 192\r Email: hq@arabfund.org\r\r\r Contact: Abdulatif Yousef Al-Hamad - Director General / Chairman\rof the Board of Directors" and I want it to display like this:
Address:
PO Box 21923 Safat
13080 Kuwait City
Kuwait

Tel: +965 249 59000
Fax: +965 249 593 909 192
Email: hq@arabfund.org

Contact: Abdulatif Yousef Al-Hamad - Director General / Chairman
of the Board of Directors

but the \r characters just display as if they were plain text and don’t actually perform a carriage return. Any quick fixes?

2

Render as HTML and use getAsCss ?

3

Found a solution, <p>{{ model.text }}</p> notation inserts as plain text and ignores all newline characters, changing to <p v-html='model.text'></p> inserts as html so <br> characters will be interpreted as line breaks.

4

A follow up note for future readers:

v-html="model.theHTML" is a preferred solution if you are generating or editing text in FM as it well bring over the Filemaker formatting as well. You will need to first encode the FileMaker styled field with getAsCss