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

Question 1

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.

Question 2

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
    }
}"

Question 3

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="[email protected]" 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 )

Question 4

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

Question 5

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)

Question 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.

Question 7

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>

Answer 1

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.

javascript json string angularjs formatting 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

Answer 2

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

Answer 3

1

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

callmekatootie

Answer 4

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

amenoire

Answer 5

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

amenoire

Answer 6

Zobacz odpowiedzi poniżej - czy pomagają?

callmekatootie

Answer 7

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

Answer 8

5

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

PixnBits,

Answer 9

1

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

MrE

Answer 10

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

Md Aslam

Answer 11

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="[email protected]" 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

Answer 12

1

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

amenoire

Answer 13

To takie proste, ale tak przydatne: D

Jamie Street

Answer 14

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

Answer 15

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

Answer 16

3

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

Lucas

Answer 17

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

Answer 18

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

Answer 19

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

Asqan

Answer 20

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

Márcio Rossato

Answer 21

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.

Answer 22

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>

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

Odpowiedzi: