В AngularJS формат выходных данных JSON строку

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

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

и не так, как это выглядит сейчас:

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

спасибо.

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

6 84
javascript angularjs string formatting json

6 ответов:

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

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

параметры

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

например:

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

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

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

угловой имеет встроенный filter показывает JSON

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

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

Demo:

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 метод, но я не играл с этим ( Docs)

394

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

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

enter image description here

23

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

angular.toJson(obj, pretty);

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

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

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

11

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

2

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

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

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

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

1