Sortie de chaîne JSON au format AngularJS

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.

— amenoire
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

65

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

— Lukasz Wiktor
source

5

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

— PixnBits

1

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

— MrE

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

— Md Aslam le

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

Développer l'extrait

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

— Ivarni
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

23

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

— Mohsen
source

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

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.

— Joy Ge
source

2

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>

— Nayan
source