Fetching and Displaying filtered Json data from API(very very urgent)

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  template: `

      <input [(ngModel)]="searchKey"> <button (click) ="search()">Search</button>

  

  <br/><br/> {{stringData}}

  

  `

})

export class AppComponent {

searchKey = '';

filteredData = []; 

stringData = '';

search() {

  this.filteredData = [];

  JSON_DATA.Recommended.forEach(parentRow => {

if (parentRow.description.indexOf(this.searchKey) < 0) {

for(let childRow of parentRow.solutions) {

if(childRow.description.indexOf(this.searchKey) >= 0) {

this.filteredData.push(parentRow);

break;

}

}

} else {

    this.filteredData.push(parentRow);

}

  });

  

  this.stringData = JSON.stringify(this.filteredData);

    }

}

const JSON_DATA = {"Recommended": [

    { 

      "coherance": "0.56026304",

      "index": "1253",

      "incident": "INC666175",

      "description": "\nGG : Speed Code BROW0152, is not valid for entered Cost-Centre\n\nWhile cleaning the ledger account for BROW0152, Global Genius shows the below error.\n\nPlease go through it and rectify it ASAP.\n\nRakesh Kumar\nAGCS SSU \u2013 India Operations\nNames Clearing Authority\n\nphone: +49 8920 602 5090\nmobile +91 989 573 88 45\ne-mail: rakesh.kumar@allianz.com\n",

      "solutions": [

        {

          "coherance": "0.34113613",

          "index": "1289",

          "incident": "INC668566",

          "description": "Issue : GG_Claims : Issue with currency exchange rate for the claim FRLL00858015.\n\nAnalysis/resolution ; As per analysis we found that while doing a claim payment currency and exchange rate has been modified by the one who did payment same as shown below. \n\ninformed User to entering the correct values to avoid any discrepancy. \n\nIncident auto-closed as no response was received from the caller for more than seven days."

        },

        {

          "coherance": "0.29351252",

          "index": "2713",

          "incident": "INC745577",

          "description": "Issue: Booking authority in Global Genius -not accessible\n\nAnalysis and Resolution: Booking authority is working fine\n\nClosure Confirmation: Yes user has confirmed that the issue is resolved"

        },

      ]

    }, 

{

  "index": "1253",

      "incident": "INC666175",

      "description": "\nGG : Speed Code BROW0152, is not valid for entered Cost-Centre\n\nWhile cleaning the ledger account for BROW0152, Global Genius shows the below error.\n\nPlease go through it and rectify it ASAP.\n\nRakesh Kumar\nAGCS SSU \u2013 India Operations\nNames Clearing Authority\n\nphone: +49 8920 602 5090\nmobile +91 989 573 88 45\ne-mail: rakesh.kumar@allianz.com\n",

      "solutions": [

        {

          "coherance": "0.34113613",

          "index": "1289",

          "incident": "INC668566",

          "description": "Issue : GG_Claims : Issue with currency exchange rate for the claim FRLL00858015.\n\nAnalysis/resolution ; As per analysis we found that while doing a claim payment currency and exchange rate has been modified by the one who did payment same as shown below. \n\ninformed User to entering the correct values to avoid any discrepancy. \n\nIncident auto-closed as no response was received from the caller for more than seven days."

        },

        {

          "coherance": "0.29351252",

          "index": "2713",

          "incident": "INC745577",

          "description": "Issue: Booking authority in Global Genius -not accessible\n\nAnalysis and Resolution: Booking authority is working fine\n\nClosure Confirmation: Yes user has confirmed that the issue is resolved"

        },

        {

          "coherance": "0.2526261",

          "index": "1458",

          "incident": "INC676473",

          "description": "Incident auto-closed as no response was received from the caller for more than seven days.\nIssue : Invoice not generated for policy DEA01229618B.\nAnalysis : Policy was cancelled on 21/11/18 with closed amount 57.00- . It got fully allocated due to OSBAL processing and journal entry( automated payment)  of amount 55.58 is created automatically. During OSBAL processing, CAN entries will be allocated and a new payment request will be automatically generated by the system.  \nResolution :To generate the required invoice document with the return premium for the broker/customer, authorize the payment in \"work with Unauthorized payments\" screen.\nUser Confirmation : No\n\n\n"

        }

      ]

    }

 ]

};

I need another help in the same query.

I have fetched the data and it is displaying good on view. But if you notice  under "description" of every "solutions[]" , there are segregation named "Issue","Analysis" and "Resolution". Each with a newline(/n) character.

But in my view its not coming in newline...rather coming as whole paragraph.

Thanks in advance for the help.