Как идентифицировать raw json при отображении в пользовательском интерфейсе?

Question

Мне нужно показать json в моем приложении angular.

Я могу отобразить json, но он идет в одну строку без разрывов строки и правильного отступа. Как я могу сделать предварительную оценку json?

 json = JSON.stringify({'widget': {
    'debug': 'on',
    'window': {
        'title': 'Sample Konfabulator Widget',
        'name': 'main_window',
        'width': 500,
        'height': 500
    },
    'image': { 
        'src': 'Images/Sun.png',
        'name': 'sun1',
        'hOffset': 250,
        'vOffset': 250,
        'alignment': 'center'
    },
    'text': {
        'data': 'Click Here',
        'size': 36,
        'style': 'bold',
        'name': 'text1',
        'hOffset': 250,
        'vOffset': 100,
        'alignment': 'center',
        'onMouseUp': 'sun1.opacity = (sun1.opacity / 100) * 90;'
    }
}});

 <code id="divv"> {{ json }} </code>

Answer 1

Используйте тег pre, как показано ниже, вместе с angular JSON pipe.

<code><pre>{{data | json}}

Пример Stackblitz

Answer 2

У меня была такая же проблема некоторое время go, но здесь вы можете использовать эту функцию, чтобы украсить json:

function beautifyJsonString(jsonString) {
    try {
        return JSON.stringify(JSON.parse(jsonString), null, 4);
    } catch (e) {}
    return jsonString;
}