CODEWITHSUNDEEP
angularangular8
user11786942
user11786942

Reputation:

Angular Json data display in component html

I am using Angular 8.

On my app.component.html I am displaying some json data linke this:

{{ myJsonData }}

This display is coming out like this:

{"information":"Information One","output":[{"ipaddress":"192.168.2.1","sName":"R45665"},{"ipaddress":"192.168.2.2","sName":"H4433D"}]}

But I need it to display like this:

{
    "information":"Information One",
    "output":[
        {
            "ipaddress":"192.168.2.1",
            "sName":"R45665"
        },
        {
            "ipaddress":"192.168.2.2",
            "sName":"H4433D"
        }
    ]
}

I've tried {{ myJsonData | json }}

But that just gives my lots of backslashes so makes the problem worse.

How can I do this?

Upvotes: 0

Views: 88

Answers (2)

Ande Caleb
Ande Caleb

Reputation: 1204

you are trying to pretty print the json output. its the pre tag you need for this.

your response to the controller comes this way.. 

{"information":"Information One","output":[{"ipaddress":"192.168.2.1","sName":"R45665"},{"ipaddress":"192.168.2.2","sName":"H4433D"}]}

in your controller file lets assume its assigned to the response.

myJsonData = JSON.stringify(response);

in your html view you can then use this.. 

<pre class="~~"> {{ myJsonData }} </pre>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222552

Try using <pre> tag,

<pre class="list-group-item-text"> {{ myJsonData | json }} </pre>

STACKBLITZ DEMO

Upvotes: 3

Related Questions