Sortie de chaîne JSON au format AngularJS

Question 1

J'ai une application AngularJS, qui collecte des données à partir de l'entrée, transforme un modèle en une chaîne en utilisant JSON.stringify()et permet à un utilisateur de modifier ce modèle de telle manière que les champs d'entrée soient mis à jour si l' <textarea>élément est mis à jour et vice versa. Une sorte de liaison bidirectionnelle :)

Le problème est que la chaîne elle-même a l'air moche et je voudrais la formater pour qu'elle ressemble à ceci:

entrez la description de l'image ici

Et pas comme ça maintenant:

entrez la description de l'image ici

Des idées comment cela peut être accompli? Si vous avez besoin d'informations supplémentaires, n'hésitez pas à demander. Chaque réponse est très appréciée et répond immédiatement.

Je vous remercie.

PS Je suppose que cela devrait être une sorte de directive ou un filtre personnalisé. Les données elles-mêmes NE DEVRAIENT PAS être modifiées, seulement la sortie.

Question 2

Vous pouvez utiliser un paramètre facultatif de JSON.stringify()

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

Paramètres

value La valeur à convertir en chaîne JSON.

replacer Si une fonction, transforme les valeurs et les propriétés rencontrées lors de la stringification; s'il s'agit d'un tableau, spécifie l'ensemble des propriétés incluses dans les objets de la chaîne finale. Une description détaillée de la fonction de remplacement est fournie dans l'article du guide javaScript Utilisation de JSON natif.

space Fait en sorte que la chaîne résultante soit bien imprimée.

Par exemple:

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

vous donnera le résultat suivant:

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

Question 3

Angular a un intégré filterpour montrerJSON

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

Notez l'utilisation du pre-tag pour conserver les espaces et les sauts de ligne

Démo:

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>

Développer l'extrait

Il y a aussi une angular.toJsonméthode, mais je n'ai pas joué avec ça ( Docs )

Question 4

Si vous cherchez à rendre JSON au format HTML et qu'il peut être réduit / ouvert, vous pouvez utiliser cette directive que je viens de créer pour le rendre joliment:

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

entrez la description de l'image ici

Question 5

En plus du filtre angulairejson déjà mentionné, il y a aussi la fonction angulairetoJson() .

angular.toJson(obj, pretty);

Le deuxième paramètre de cette fonction vous permet d'activer la jolie impression et de définir le nombre d'espaces à utiliser.

S'il est défini sur true, la sortie JSON contiendra des retours à la ligne et des espaces. Si elle est définie sur un entier, la sortie JSON contiendra autant d'espaces par indentation.

(par défaut: 2)

Question 6

Je suppose que vous voulez utiliser pour éditer le texte json. Ensuite, vous pouvez utiliser la manière d'ivarni:

{{données | json}}

et ajoutez un attribut supplémentaire pour faire

 modifiable


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

J'espère que cela peut vous aider.

Question 7

Si vous souhaitez formater le JSON et également mettre en évidence la syntaxe, vous pouvez utiliser la ng-prettyjsondirective. Voir le package npm.

Voici comment l'utiliser: <pre pretty-json="jsonObject"></pre>

Answer 1

92

J'ai une application AngularJS, qui collecte des données à partir de l'entrée, transforme un modèle en une chaîne en utilisant JSON.stringify()et permet à un utilisateur de modifier ce modèle de telle manière que les champs d'entrée soient mis à jour si l' <textarea>élément est mis à jour et vice versa. Une sorte de liaison bidirectionnelle :)

Le problème est que la chaîne elle-même a l'air moche et je voudrais la formater pour qu'elle ressemble à ceci:

entrez la description de l'image ici

Et pas comme ça maintenant:

entrez la description de l'image ici

Des idées comment cela peut être accompli? Si vous avez besoin d'informations supplémentaires, n'hésitez pas à demander. Chaque réponse est très appréciée et répond immédiatement.

Je vous remercie.

PS Je suppose que cela devrait être une sorte de directive ou un filtre personnalisé. Les données elles-mêmes NE DEVRAIENT PAS être modifiées, seulement la sortie.

javascript json string angularjs formatting amenoire
la source

1

Pouvez-vous essayer ceci - Dans la zone de texte, appuyez sur Entrée et formatez la chaîne résultante comme vous le souhaitez. Ensuite, dans votre $watch(basé sur la réponse à la question précédente) sur le modèle textarea, pouvez-vous faire un console.log()et voir quelle valeur vous obtenez dans la chaîne pour la clé d'entrée - je pense que c'est "/ n"

callmekatootie

1

Sur cette base, je peux suggérer comment mettre en forme le texte

callmekatootie

{"anchorPosition": "1", "difficulté": "1", "includeInSequence": "1", "questionCount": "1"}

amenoire

En gros, rien n'a changé après le formatage de String.

amenoire

Voir les réponses ci-dessous - aident-ils?

callmekatootie

Answer 2

1

Pouvez-vous essayer ceci - Dans la zone de texte, appuyez sur Entrée et formatez la chaîne résultante comme vous le souhaitez. Ensuite, dans votre $watch(basé sur la réponse à la question précédente) sur le modèle textarea, pouvez-vous faire un console.log()et voir quelle valeur vous obtenez dans la chaîne pour la clé d'entrée - je pense que c'est "/ n"

callmekatootie

Answer 3

1

Sur cette base, je peux suggérer comment mettre en forme le texte

callmekatootie

Answer 4

{"anchorPosition": "1", "difficulté": "1", "includeInSequence": "1", "questionCount": "1"}

amenoire

Answer 5

En gros, rien n'a changé après le formatage de String.

amenoire

Answer 6

Voir les réponses ci-dessous - aident-ils?

callmekatootie

Answer 7

Vous pouvez utiliser un paramètre facultatif de JSON.stringify()

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

Paramètres

value La valeur à convertir en chaîne JSON.

replacer Si une fonction, transforme les valeurs et les propriétés rencontrées lors de la stringification; s'il s'agit d'un tableau, spécifie l'ensemble des propriétés incluses dans les objets de la chaîne finale. Une description détaillée de la fonction de remplacement est fournie dans l'article du guide javaScript Utilisation de JSON natif.

space Fait en sorte que la chaîne résultante soit bien imprimée.

Par exemple:

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

vous donnera le résultat suivant:

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

Answer 8

5

notez que cela préserve la $$hashKeypropriété angulaire utilise pour le suivi du modèle interne

PixnBits

Answer 9

1

Vous pouvez également faire JSON.stringify(object, null, 2)où 2 est le nombre de caractères d'espace blanc.

MrE

Answer 10

@ Lukasz, puis-je éviter le $$ Hashkey?

Md Aslam le

Answer 11

433

Angular a un intégré filterpour montrerJSON

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

Notez l'utilisation du pre-tag pour conserver les espaces et les sauts de ligne

Démo:

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>

Développer l'extrait

Il y a aussi une angular.toJsonméthode, mais je n'ai pas joué avec ça ( Docs )

Ivarni
la source

1

Oui, je le sais déjà. Mais je ne peux pas créer ce filtre car la zone de texte elle-même est un modèle.

amenoire

C'est si simple, mais si utile: D

Jamie Street

2

@ ra170 Soyez si aimable de lire attentivement toute la question, pas seulement le titre. Je demandais une chose légèrement différente d'un simple filtre json.

amenoire

Notez que votre <pre>balise ne doit pas avoir la white-spacepropriété définie sur normalou no-wrap. Sinon, votre JSON ne serait pas mis en retrait comme vous le souhaitez.

falconepl

3

J'avais des problèmes mais je faisais sans <pre> .... J'ai vu cette réponse et j'ai corrigé .... merci !!

Lucas

Answer 12

1

Oui, je le sais déjà. Mais je ne peux pas créer ce filtre car la zone de texte elle-même est un modèle.

amenoire

Answer 13

C'est si simple, mais si utile: D

Jamie Street

Answer 14

2

@ ra170 Soyez si aimable de lire attentivement toute la question, pas seulement le titre. Je demandais une chose légèrement différente d'un simple filtre json.

amenoire

Answer 15

Notez que votre <pre>balise ne doit pas avoir la white-spacepropriété définie sur normalou no-wrap. Sinon, votre JSON ne serait pas mis en retrait comme vous le souhaitez.

falconepl

Answer 16

3

J'avais des problèmes mais je faisais sans <pre> .... J'ai vu cette réponse et j'ai corrigé .... merci !!

Lucas

Answer 17

Si vous cherchez à rendre JSON au format HTML et qu'il peut être réduit / ouvert, vous pouvez utiliser cette directive que je viens de créer pour le rendre joliment:

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

entrez la description de l'image ici

Answer 18

11

En plus du filtre angulairejson déjà mentionné, il y a aussi la fonction angulairetoJson() .

angular.toJson(obj, pretty);

Le deuxième paramètre de cette fonction vous permet d'activer la jolie impression et de définir le nombre d'espaces à utiliser.

S'il est défini sur true, la sortie JSON contiendra des retours à la ligne et des espaces. Si elle est définie sur un entier, la sortie JSON contiendra autant d'espaces par indentation.

(par défaut: 2)

Daniel Haley
la source

ma page est bloquée quand je lui donne un tableau de 1000 objets

Asqan

Youvariable = angular.toJson ...., comme vous l'avez écrit, cela ressemble au résultat dans pretty

Márcio Rossato

Answer 19

ma page est bloquée quand je lui donne un tableau de 1000 objets

Asqan

Answer 20

Youvariable = angular.toJson ...., comme vous l'avez écrit, cela ressemble au résultat dans pretty

Márcio Rossato

Answer 21

Je suppose que vous voulez utiliser pour éditer le texte json. Ensuite, vous pouvez utiliser la manière d'ivarni:

{{données | json}}

et ajoutez un attribut supplémentaire pour faire

 modifiable


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

J'espère que cela peut vous aider.

Answer 22

Si vous souhaitez formater le JSON et également mettre en évidence la syntaxe, vous pouvez utiliser la ng-prettyjsondirective. Voir le package npm.

Voici comment l'utiliser: <pre pretty-json="jsonObject"></pre>

Sortie de chaîne JSON au format AngularJS

Réponses: