Вывод строки 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>

Answer 1

92

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

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

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

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

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

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

Спасибо.

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

javascript json string angularjs formatting аменуар
источник

1

Можете ли вы попробовать это - в текстовой области нажмите ввод и отформатируйте полученную строку по своему усмотрению. Затем в вашей $watch(на основе ответа на предыдущий вопрос) по модели textarea, можете ли вы сделать a console.log()и посмотреть, какое значение вы получаете в строке для клавиши ввода - я думаю, что это "/ n"

callmekatootie 01

1

Исходя из этого, я могу предложить, как можно отформатировать текст

callmekatootie 01

{"anchorPosition": "1", "сложность": "1", "includeInSequence": "1", "questionCount": "1"}

аменуар 01

По сути, ничего не изменилось после форматирования String.

amenoire 01

См. Ответы ниже - они помогают?

callmekatootie 01

Answer 2

1

Можете ли вы попробовать это - в текстовой области нажмите ввод и отформатируйте полученную строку по своему усмотрению. Затем в вашей $watch(на основе ответа на предыдущий вопрос) по модели textarea, можете ли вы сделать a console.log()и посмотреть, какое значение вы получаете в строке для клавиши ввода - я думаю, что это "/ n"

callmekatootie 01

Answer 3

1

Исходя из этого, я могу предложить, как можно отформатировать текст

callmekatootie 01

Answer 4

{"anchorPosition": "1", "сложность": "1", "includeInSequence": "1", "questionCount": "1"}

аменуар 01

Answer 5

По сути, ничего не изменилось после форматирования String.

amenoire 01

Answer 6

См. Ответы ниже - они помогают?

callmekatootie 01

Answer 7

Вы можете использовать необязательный параметр 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
    }
}"

Answer 8

5

обратите внимание, что это сохраняет $$hashKeyсвойство angular, используемое для внутреннего отслеживания модели

PixnBits

Answer 9

1

Вы также можете указать, JSON.stringify(object, null, 2)где 2 - количество пробелов.

MrE 05

Answer 10

@ Лукаш, можно мне избежать $$ Hashkey?

Md Aslam

Answer 11

434

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

иварни
источник

1

Да, я это уже знаю. Но я не могу создать этот фильтр, потому что текстовое поле само по себе является моделью.

amenoire 01

Это так просто, но так полезно: D

Джейми-стрит

2

@ ra170 Будьте добры, внимательно прочтите весь вопрос, а не только заголовок. Я просил немного о другом, чем простой фильтр json.

amenoire

Обратите внимание, что для вашего <pre>тега не должно быть установлено white-spaceсвойство normalили no-wrap. В противном случае ваш JSON не будет иметь желаемый отступ.

falconepl

3

У меня были проблемы, но я обходился без <pre> .... Я увидел этот ответ и исправил .... спасибо !!

Лукас

Answer 12

1

Да, я это уже знаю. Но я не могу создать этот фильтр, потому что текстовое поле само по себе является моделью.

amenoire 01

Answer 13

Это так просто, но так полезно: D

Джейми-стрит

Answer 14

2

@ ra170 Будьте добры, внимательно прочтите весь вопрос, а не только заголовок. Я просил немного о другом, чем простой фильтр json.

amenoire

Answer 15

Обратите внимание, что для вашего <pre>тега не должно быть установлено white-spaceсвойство normalили no-wrap. В противном случае ваш JSON не будет иметь желаемый отступ.

falconepl

Answer 16

3

У меня были проблемы, но я обходился без <pre> .... Я увидел этот ответ и исправил .... спасибо !!

Лукас

Answer 17

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

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

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

Answer 18

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

angular.toJson(obj, pretty);

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

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

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

Answer 19

моя страница блокируется, когда я даю ему массив из 1000 объектов

Аскан,

Answer 20

Youvariable = angular.toJson ...., как вы писали, похоже, что результат

хорош

Answer 21

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

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

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

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

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

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

Answer 22

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

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

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

Ответы: