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

Question 1

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

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

введите описание изображения здесь

И не так, как сейчас:

введите описание изображения здесь

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

Спасибо.

PS Думаю, это должна быть какая-то директива или кастомный фильтр. Сами данные НЕ ДОЛЖНЫ изменяться, только вывод.

Question 2

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

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

Параметры

value Значение, которое нужно преобразовать в строку JSON.

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

пробел Заставляет результирующую строку красиво печататься.

Например:

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

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

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

Question 3

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="angular.js@1.2.15" 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>

Развернуть фрагмент

Также есть angular.toJsonметод, но я с ним не играл ( Документы )

Question 4

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

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

введите описание изображения здесь

Question 5

Помимо уже упомянутого углового jsonфильтра , есть еще угловая toJson()функция .

angular.toJson(obj, pretty);

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

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

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

Question 6

Я думаю, вы хотите использовать для редактирования текста json. Тогда вы можете использовать способ Иварни:

{{данные | json}}

и добавьте атрибут adition, чтобы

 редактируемый

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

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

Question 7

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

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