Question: I am using angular 8 and I have some data that is currently showing on the div like this:

```
{"Information":"Information one","Output":[{"address1":"someaddress"},{"address2":"someaddress"},{"address3":"someaddress"},{"address4":"someaddress"}]}

```

As you can see, it's all in a line.

Here is how the .html file looks like:

```
<div><pre><code>{{ content }}</code></pre></div>

```

I have tried this:

```
<div><pre><code>{{ content | json }}</code></pre></div>

```

..but the output looks like this:

```
"{\"Information\":\"Information one\",\"Output\":[{\"address1\":\"someaddress\"},{\"address2\":\"someaddress\"},{\"address3\":\"someaddress\"},{\"address4\":\"someaddress\"}]}"

```

So it's even worse.

How can I make it look more like this?

```
{
  "Information":"Information one",
  "Output":[
    {
      "address1":"someaddress"
    },
    {
      "address2":"someaddress"
    },
    {
      "address3":"someaddress"
    },
    {
      "address4":"someaddress"
    }
  ]
}

```

Answer: 
You can use [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) to achieve this.

Add this function in your component.ts:

```
prettify(jsonobj) {
   return JSON.stringify(jsonobj,null,'\t');
}

```

And then in your template, instead of `<div><pre><code>{{ content }}</code></pre></div>`, use this:

```
<div><pre><code>{{ prettify(content) }}</code></pre></div>

```

Working Stackblitz demo: <https://stackblitz.com/edit/angular-f9tdhu>
Does your page require to print into that format or you just want to preview for yourself (normally, I use [PrettyJSON](https://jsonformatter.org/json-pretty-print)  to preview it)?