How to format correctly JSON results in HTML? Issues with \r\n\

Question

I'm working with Angular 2/4.

So basically my problem is this:

I'm getting some .txt files from the server in JSON format, for example:

    "id": [SOMENUMBER],
    "title": [SOMESTRING],
    "text": "\r\[SOMETEXT] \r\n\r\n[SOMETEXT]\r\n[SOMETEXT]:\r\n\r\n[SOMETEXT]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n************************************************************************************************\r\n\[SOMEMORETEXT]

As you can see there's a load of \r\n newlines that I need to show in my HTML template. However, as of right now, what I see when I try to display the text value is:

  [SOMETEXT]    [SOMETEXT] [SOMETEXT]:  [SOMETEXT]             *****************************************************************[SOMEMORETEXT]

Basically, there's no carriage returns when what I actually want is something like:

[SOMETEXT]



[SOMETEXT]

[SOMETEXT]:


[SOMETEXT]
etc.

Any advice?