Angular 2 - Display a formatted JSON string in User Interface

Question

In my app I have an API call that returns a JSON with the following (simplified) structure:

{
   "prop1": "foo",
   "prop2": "bar",
   "details": "{\"title\": \"Sample Konfabulator Widget\", \"name\": \"main_window\", \"width\": 500, \"height\": 500}"
}

The details prop contains a large stringified JSON that is read from the database.

Now, in the User Interface I want to display a prettified and formatted version of the details prop, something like:

I've tried it with:

<pre>{{ apiResponse.details }}</pre>

But the entire JSON is displayed in a single line.

The code I've tried is: https://stackblitz.com/edit/angular-pkfgvf?file=src%2Fapp%2Fapp.component.ts

Thanks!

in your demo you need to parse the string into json, you can wrap the string with JSON.parse stackblitz.com/edit/angular-nwjaxc?file=src/app/… — Juan
– Juan, Commented Apr 13, 2020 at 15:36

Juan · Accepted Answer · 2020-04-13 16:29:47Z

1

Your details it's not a json object and that's why it's not being parsed, you will need to wrap it in JSON.parse()

details: JSON.parse("{\"title\": \"Sample Konfabulator Widget\", \"name\": \"main_window\", \"width\": 500, \"height\": 500}")

and you can now display it using the json pipe

{{ apiResponse.details | json  }}

Updated Demo

edited Apr 13, 2020 at 16:29

answered Apr 13, 2020 at 15:52

Juan

5,0883 gold badges41 silver badges49 bronze badges

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

2 Comments

andreivictor Over a year ago

I've put it in a try / catch block, just to make sure that the app doesn't break: stackblitz.com/edit/…

Martin Parenteau Over a year ago

@Juan - After parsing the JSON string, the resulting object is displayed with {{ apiResponse.details | json }}. I suggest mentioning it in the answer.

rajratna maitry · Accepted Answer · 2020-04-13 15:55:54Z

0

If you don't want to use JSON.parse() in you object directly, so you can create pipe that convert string object in to json.

answered Apr 13, 2020 at 15:55

rajratna maitry

5084 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Display a formatted JSON string in User Interface

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related