Angular Json data display in component html

Question

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?

its because its not json but a string use JSON.parse(myJsonData) — Joel Joseph
– Joel Joseph, Commented Dec 18, 2019 at 9:53
See answer to question, how to display JSON data: stackoverflow.com/questions/59862466/… — Nik Dow
– Nik Dow, Commented May 25 at 9:44

Sajeetharan · Accepted Answer · 2019-12-18 09:51:44Z

3

Try using <pre> tag,

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

STACKBLITZ DEMO

answered Dec 18, 2019 at 9:51

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user11786942 Over a year ago

This gives me this result: {\"information\":\"Information One\",\"output\":[{\"ipaddress\":\"192.168.2.1\",\"sName\":\"R45665\"},{\"ipaddress\":\"192.168.2.2\",\"sName\":\"H4433D\"}]}

Ande Caleb · Accepted Answer · 2019-12-18 10:01:13Z

0

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>

answered Dec 18, 2019 at 10:01

Ande Caleb

1,2041 gold badge15 silver badges41 bronze badges

3 Comments

user11786942 Over a year ago

Can't do that...I get: Type 'string' is not assignable to type 'myJsonData[]'

Ande Caleb Over a year ago

okay maybe thats why you had to use the json pipe filter. because if you posted how you received the json to the variable. then i would have understood better.

user11786942 Over a year ago

The data is added using .push()

Collectives™ on Stack Overflow

Angular Json data display in component html

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related