Angular 2 - отображение отформатированной строки JSON в пользовательском интерфейсе

Question

В моем приложении есть вызов API, который возвращает JSON со следующей (упрощенной) структурой:

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

Пропеллер details содержит большую строку JSON, которая читается из базы данных.

Теперь в пользовательском интерфейсе я хочу отобразить предварительно отформатированную и отформатированную версию details проп, что-то вроде:

Я пробовал это с:

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

Но все JSON отображается в одной строке.

Код I ' Мы пробовали: https://stackblitz.com/edit/angular-pkfgvf?file=src%2Fapp%2Fapp.component.ts

Спасибо!

Answer 1

Ваш details это не json объект, и поэтому он не анализируется, вам нужно будет обернуть его в JSON.parse()

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

, и теперь вы можете отобразить его с помощью json труба

{{ apiResponse.details | json  }}

Обновленная демоверсия

Answer 2

Если вы не хотите использовать JSON .parse () в вашем объекте напрямую, вы можете создать конвейер, который преобразует строковый объект в json.