Вывод строки JSON формата AngularJS

У меня есть приложение AngularJS, которое собирает данные из ввода, преобразует модель в строку с помощью JSON.stringify() и позволяет пользователю редактировать эту модель таким образом, что поля ввода обновляются, если элемент <textarea> обновлен и наоборот. Какой-то двухсторонний привязкой:)

Проблема в том, что сама строка выглядит уродливой, и я хотел бы отформатировать ее так, чтобы она выглядела следующим образом:

enter image description here

И теперь не выглядит так:

enter image description here

Любые идеи, как это можно выполнить? Если вам нужна дополнительная информация - не стесняйтесь спрашивать. Каждый ответ получил высокую оценку и ответил на него.

Спасибо.

P.S. Я предполагаю, что это должна быть какая-то директива или настраиваемый фильтр. Сами данные НЕ ДОЛЖНЫ быть изменены, только выход.

Ответы

Ответ 1

Вы можете использовать необязательный параметр JSON.stringify()

JSON.stringify(value[, replacer [, space]])

Параметры

  • value Значение для преобразования в строку JSON.
  • replacer Если функция, преобразует значения и свойства, возникающие при стягивании; если array, задает набор свойств, включенных в объекты в конечная строка. Подробное описание функции замены выполняется приведенный в статье руководства javaScript. Использование встроенного JSON.
  • пространство Заставляет результирующую строку быть напечатанной.

Например:

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

даст вам следующий результат:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

Ответ 2

Angular имеет встроенный filter для отображения JSON

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

Обратите внимание на использование pre -tag для сохранения пробелов и строк

Демо:

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="[email protected]" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>
  </body>

</html>

Ответ 3

Если вы хотите отображать JSON как HTML и его можно развернуть/открыть, вы можете использовать эту директиву, которую я только что сделал, чтобы сделать ее красивой:

https://github.com/mohsen1/json-formatter/

enter image description here

Ответ 4

В дополнение к уже отмеченному angular json фильтру, также есть angular toJson() функции.

angular.toJson(obj, pretty);

Второй параметр этой функции позволяет вам довольно широко печатать и устанавливать количество используемых пробелов.

Если установлено значение true, вывод JSON будет содержать символы новой строки и пробелы. Если задано целое число, вывод JSON будет содержать это много пробелов для отступов.

(по умолчанию: 2)

Ответ 5

Если вы хотите отформатировать JSON, а также выделить подсветку синтаксиса, вы можете использовать директиву ng-prettyjson. См. пакет npm.

Вот как его использовать: <pre pretty-json="jsonObject"></pre>

Ответ 6

Я думаю, вы хотите использовать для редактирования json-текста. Затем вы можете использовать путь ivarni:   

{{data | json}}
и добавьте атрибут adition, чтобы сделать 
 editable

<pre contenteditable="true">{{data | json}}</pre>

Надеюсь, это поможет вам.