Виведення рядка JSON у форматі AngularJS

92

У мене є додаток AngularJS, який збирає дані з вхідних даних, перетворює модель в рядок за допомогою JSON.stringify()та дозволяє користувачеві редагувати цю модель таким чином, що поля введення оновлюються, якщо <textarea>елемент оновлюється і навпаки. Якась двостороння прив'язка :)

Проблема полягає в тому, що сама струна виглядає некрасиво, і я хотів би її відформатувати, щоб вона виглядала так:

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

І не так, як це виглядає зараз:

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

Будь-які ідеї, як це можна здійснити? Якщо вам потрібна додаткова інформація - не соромтеся запитувати. Кожна відповідь високо оцінюється і відповідає негайно.

Дякую.

PS Я думаю, це має бути якась директива або спеціальний фільтр. Самі дані НЕ БУДУТЬ змінюватись, лише вихід.

— аменоар
джерело

1

Чи можете ви спробувати це? У текстовій області натисніть клавішу Enter і відформатуйте отриманий рядок за бажанням. Тоді у вашому $watch(на основі відповіді на попереднє запитання) над моделлю textarea ви можете зробити a console.log()і побачити, яке значення ви отримаєте в рядку для клавіші введення - я думаю, що це "/ n"

— callmekatootie

1

Виходячи з цього, я можу запропонувати, як можна відформатувати текст

— callmekatootie

{"anchorPosition": "1", "труднощі": "1", "includeInSequence": "1", "questionCount": "1"}

— amenoire

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

— аменоар

Дивіться відповіді нижче - чи допомагають вони?

— callmekatootie

65

Ви можете використовувати необов'язковий параметр JSON.stringify()

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

Параметри

значення Значення для перетворення в рядок JSON.

замінювач Якщо функція перетворює значення та властивості, що виникають під час строфікації; якщо масив, вказує набір властивостей, що входять до об'єктів у заключному рядку. Детальний опис функції заміни надано у статті керівництва javaScript Використання нативного JSON.

space Викликає симпатичний друк отриманого рядка.

Наприклад:

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

дасть наступний результат:

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

— Лукаш Віктор
джерело

5

зауважте, що це зберігає $$hashKeyвластивості кутового використання для внутрішнього відстеження моделі

— PixnBits

1

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

— MrE

@ Лукаш, чи можу я уникнути $$ Hashkey?

— Md

433

Кутовий має вбудований filterдля показуJSON

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

Зверніть увагу на використання preтегів -a для збереження пробілів та пробілів рядків

Демонстрація:

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

— ivarni
джерело

1

Так, я це вже знаю. Але я не можу зробити цей фільтр, тому що сам textarea є моделлю.

— аменоар

Це так просто, але настільки корисно: D

— Джеймі Стріт

2

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

— аменоар

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

— falconepl

3

У мене були проблеми, але я робив без <pre> .... Я побачив цю відповідь, і я виправив .... дякую !!

— Лукас

23

Якщо ви хочете відобразити JSON як HTML, і він може бути згорнутий / відкритий, ви можете використовувати цю директиву, яку я щойно зробив, щоб красиво її відтворити:

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

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

— Мохсен
джерело

11

Окрім згаданого кутового jsonфільтра , є ще й кутова toJson()функція .

angular.toJson(obj, pretty);

Другий параметр цієї функції дозволяє увімкнути гарненьку друк і встановити кількість пробілів для використання.

Якщо встановлено значення true, вихід JSON буде містити нові рядки та пробіли. Якщо встановлено ціле число, вихід JSON буде містити стільки пробілів на відступ.

(за замовчуванням: 2)

— Деніел Хейлі
джерело

моя сторінка заблокована, коли я даю йому масив з 1000 об’єктів

— Аскан

Youvariable = angular.toJson ...., як ви писали, результат виглядає досить сильно

— Márcio Rossato

6

Я думаю, ви хочете використовувати для редагування тексту json. Тоді ви можете скористатися способом ivarni:

{{дані | json}}

і додати атрибут adition для створення

 для редагування


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

Сподіваюся, що це може вам допомогти.

— Радість Ге
джерело

2

Якщо ви хочете відформатувати JSON, а також зробити виділення синтаксису, ви можете використовувати ng-prettyjsonдирективу. Дивіться пакет npm.

Ось як його використовувати: <pre pretty-json="jsonObject"></pre>

— Наян
джерело