Wyjście ciągów JSON w formacie AngularJS

92

Mam aplikację AngularJS, która zbiera dane z danych wejściowych, przekształca model w ciąg przy użyciu JSON.stringify()i pozwala użytkownikowi edytować ten model w taki sposób, że pola wejściowe są aktualizowane, jeśli <textarea>element jest aktualizowany i odwrotnie. Jakieś wiązanie dwukierunkowe :)

Problem w tym, że sam String wygląda brzydko i chciałbym go sformatować tak, aby wyglądał tak:

wprowadź opis obrazu tutaj

I nie tak, jak teraz wygląda:

wprowadź opis obrazu tutaj

Jakieś pomysły, jak można to osiągnąć? Jeśli potrzebujesz dodatkowych informacji - nie wahaj się zapytać. Każda odpowiedź jest wysoko ceniona i udzielana natychmiast.

Dziękuję Ci.

PS Myślę, że to powinna być jakaś dyrektywa lub niestandardowy filtr. Same dane NIE POWINNY być zmieniane, tylko dane wyjściowe.

— amenoire
źródło

1

Czy możesz tego spróbować - w obszarze tekstowym naciśnij klawisz Enter i sformatuj wynikowy ciąg zgodnie z potrzebami. Następnie w swoim $watch(w oparciu o odpowiedź na poprzednie pytanie) w modelu textarea, czy możesz zrobić a console.log()i zobaczyć, jaką wartość uzyskasz w ciągu dla klawisza enter - myślę, że to "/ n"

— callmekatootie

1

Na tej podstawie mogę zasugerować, jak sformatować tekst

— callmekatootie

{"anchorPosition": "1", "pleasure": "1", "includeInSequence": "1", "questionCount": "1"}

— amenoire

W zasadzie nic się nie zmieniło po sformatowaniu String.

— amenoire

Zobacz odpowiedzi poniżej - czy pomagają?

— callmekatootie

66

Możesz użyć opcjonalnego parametru JSON.stringify()

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

Parametry

wartość Wartość do przekonwertowania na ciąg JSON.

zamiennik Jeśli funkcja, przekształca wartości i właściwości napotkane podczas określania łańcuchów; jeśli tablica, określa zestaw właściwości zawartych w obiektach w końcowym ciągu. Szczegółowy opis funkcji zamiennika znajduje się w artykule przewodnika javaScript Korzystanie z natywnego formatu JSON.

space Powoduje, że otrzymany łańcuch jest ładnie wydrukowany.

Na przykład:

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

da następujący wynik:

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

— Łukasz Wiktor
źródło

5

zwróć uwagę, że zachowuje to $$hashKeywłaściwość, której kąt używa do śledzenia modelu wewnętrznego

— PixnBits,

1

Możesz także zrobić, JSON.stringify(object, null, 2)gdzie 2 to liczba białych znaków.

— MrE

@ Łukasz, Czy mogę uniknąć $$ Hashkey?

— Md Aslam

433

Angular ma wbudowaną funkcję filterwyświetlaniaJSON

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

Zwróć uwagę na użycie pre-tag, aby zachować odstępy i podziały wierszy

Próbny:

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>

Rozwiń fragment

Jest też angular.toJsonmetoda, ale nie bawiłem się nią ( Dokumenty )

— ivarni
źródło

1

Tak, już to wiem. Ale nie mogę zrobić tego filtru, ponieważ sam obszar tekstowy jest modelem.

— amenoire

To takie proste, ale tak przydatne: D

— Jamie Street

2

@ ra170 Bądź uprzejmy i uważnie przeczytaj całe pytanie, a nie tylko nagłówek. Prosiłem o trochę inną rzecz niż prosty filtr json.

— amenoire

Pamiętaj, że <pre>tag nie powinien mieć white-spacewłaściwości ustawionej na normallub no-wrap. W przeciwnym razie w Twoim JSON nie byłoby wcięć, jak chcesz.

— falconepl

3

Miałem problemy, ale robiłem bez <pre> .... zobaczyłem tę odpowiedź i naprawiłem .... dzięki !!

— Lucas

23

Jeśli chcesz renderować JSON jako HTML i można go zwinąć / otworzyć, możesz użyć tej dyrektywy, którą właśnie stworzyłem, aby ładnie go renderować:

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

wprowadź opis obrazu tutaj

— Mohsen
źródło

11

Oprócz wspomnianego już filtra kątowegojson istnieje również funkcja kątowatoJson() .

angular.toJson(obj, pretty);

Drugi parametr tej funkcji pozwala włączyć ładne drukowanie i ustawić liczbę spacji do wykorzystania.

Jeśli jest ustawiona na true, dane wyjściowe JSON będą zawierać znaki nowej linii i spacje. Jeśli jest ustawiona na liczbę całkowitą, dane wyjściowe JSON będą zawierać tyle spacji na wcięcie.

(domyślnie: 2)

— Daniel Haley
źródło

moja strona jest blokowana, kiedy daję mu tablicę 1000 obiektów

— Asqan

Youvariable = angular.toJson ...., jak napisałeś, wygląda na to, że wynik jest ładny

— Márcio Rossato

6

Chyba chcesz użyć do edycji tekstu json. Następnie możesz użyć sposobu Ivarniego:

{{dane | json}}

i dodaj atrybut adition do wykonania

 edytowalne

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

Mam nadzieję, że to może ci pomóc.

— Joy Ge
źródło

2

Jeśli chcesz sformatować JSON, a także podświetlić składnię, możesz użyć ng-prettyjsondyrektywy. Zobacz pakiet npm.

Oto jak z niego korzystać: <pre pretty-json="jsonObject"></pre>

— Nayan
źródło