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.

— 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

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

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

23

Si está buscando renderizar JSON como HTML y se puede contraer / abrir, puede usar esta directiva que acabo de hacer para renderizarlo bien:

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

ingrese la descripción de la imagen aquí

— Mohsen
fuente

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