web-dev-qa-db-fra.com

Sortie de chaîne JSON au format AngularJS

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

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

enter image description here

Et pas comme si ça avait l'air maintenant:

enter image description here

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.

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

javascriptjsonstringangularjsformatting
90
amenoire

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 chaîne de caractères; 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 du JSON natif.
  • space Fait en sorte que la chaîne résultante soit joliment 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
    }
}"
59
Lukasz Wiktor

L'angle a un filter intégré pour montrer JSON

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

Notez l’utilisation de la balise pre- 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>

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

422
ivarni

Si vous cherchez à rendre JSON au format HTML et que vous pouvez le réduire/l'ouvrir, vous pouvez utiliser cette directive que je viens de créer pour le rendre correctement:

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

enter image description here

23
Mohsen

Outre le filtre filtre _ angulaire json déjà mentionné, il existe également le filtre fonction _ angulaire toJson() .

angular.toJson(obj, pretty);

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

Si la valeur est true, la sortie JSON contiendra des nouvelles lignes et des espaces. Si la valeur est un entier, la sortie JSON contiendra autant d'espaces par indentation.

(défaut: 2)

11
Daniel Haley

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

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

J'espère que cela peut vous aider.

4
Joy Ge

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

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

2
Nayan