Salida de cadena JSON en formato AngularJS

92

Tengo una aplicación AngularJS, que recopila datos de la entrada, transforma un modelo en una cadena JSON.stringify()y le permite al usuario editar este modelo de tal manera que los campos de entrada se actualizan si el <textarea>elemento se actualiza y viceversa. Algún tipo de enlace bidireccional :)

El problema es que la cadena en sí se ve fea y me gustaría formatearla para que se vea así:

ingrese la descripción de la imagen aquí

Y no como se ve ahora:

ingrese la descripción de la imagen aquí

¿Alguna idea de cómo se puede lograr esto? Si necesita información adicional, no dude en preguntar. Cada respuesta es muy apreciada y respondida de inmediato.

Gracias.

PD: Supongo que esto debería ser algún tipo de directiva o un filtro personalizado. Los datos en sí NO DEBEN modificarse, solo la salida.

javascript json string angularjs formatting amenoire
fuente
1
¿Puede probar esto? En el área de texto, presione Intro y formatee la cadena resultante como desee. Luego, en su $watch(basado en la respuesta a la pregunta anterior) sobre el modelo de área de texto, ¿puede hacer console.log()y ver qué valor obtiene en la cadena para la tecla enter? Creo que es "/ n"
callmekatootie
1
Basado en esto, puedo sugerir cómo puede formatear el texto
callmekatootie
{"anchorPosition": "1", "dificultad": "1", "includeInSequence": "1", "questionCount": "1"}
amenoire
Básicamente, nada cambió después de que se formateó String.
amenoire
Vea las respuestas a continuación: ¿ayudan?
callmekatootie

Respuestas:

65

Puede utilizar un parámetro opcional de JSON.stringify()

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

Parámetros

  • valor El valor que se va a convertir en una cadena JSON.
  • Reemplazar Si es una función, transforma los valores y las propiedades encontrados durante la secuenciación; si es una matriz, especifica el conjunto de propiedades incluidas en los objetos en la cadena final. Se proporciona una descripción detallada de la función de reemplazo en el artículo de la guía de JavaScript Uso de JSON nativo.
  • space Provoca que la cadena resultante se imprima de forma bonita.

Por ejemplo:

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

le dará el siguiente resultado:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"
Lukasz Wiktor
fuente
5
tenga en cuenta que esto conserva los $$hashKeyusos angulares de la propiedad para el seguimiento del modelo interno
PixnBits
1
También puede hacer JSON.stringify(object, null, 2)donde 2 es el número de caracteres de espacio en blanco.
MrE
@ Lukasz, ¿puedo evitar el $$ Hashkey?
Md Aslam
433

Angular tiene una función incorporada filterpara mostrarJSON

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

Tenga en cuenta el uso de la preetiqueta -etiqueta para conservar espacios en blanco y saltos de línea

Manifestación:

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

También hay un angular.toJsonmétodo, pero no he jugado con eso ( Docs )

ivarni
fuente
1
Sí, ya lo sé. Pero no puedo hacer este filtro porque el área de texto en sí es un modelo.
amenoire
Esto es tan simple, pero tan útil: D
Jamie Street
2
@ ra170 Sea tan amable de leer toda la pregunta detenidamente, no solo el título. Estaba pidiendo algo ligeramente diferente a un simple filtro json.
amenoire
Tenga en cuenta que su <pre>etiqueta no debe tener la white-spacepropiedad establecida en normalo no-wrap. De lo contrario, su JSON no se sangraría como desea.
falconepl
3
Estaba teniendo problemas pero me las estaba arreglando sin <pre> .... Vi esta respuesta y la arreglé .... gracias !!
Lucas
11

Además del filtro angularjson ya mencionado, también existe la función angulartoJson() .

angular.toJson(obj, pretty);

El segundo parámetro de esta función le permite activar la impresión bonita y establecer el número de espacios a utilizar.

Si se establece en verdadero, la salida JSON contendrá nuevas líneas y espacios en blanco. Si se establece en un número entero, la salida JSON contendrá esa cantidad de espacios por sangría.

(predeterminado: 2)

Daniel Haley
fuente
mi página está bloqueada cuando le doy una matriz de 1000 objetos
Asqan
Youvariable = angular.toJson ...., como escribiste, parece que el resultado es bonito
Márcio Rossato
6

Supongo que quieres usar para editar el texto json. Entonces puedes usar el método de ivarni: 

{{datos | json}}
y agregue un atributo adicional para hacer 
 editable


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

Espero que esto le pueda ayudar.

Joy Ge
fuente
2

Si desea formatear el JSON y también resaltar la sintaxis, puede usar la ng-prettyjsondirectiva. Vea el paquete npm.

Así es como se usa: <pre pretty-json="jsonObject"></pre>

Nayan
fuente