Output stringa JSON in formato AngularJS

92

Ho un'applicazione AngularJS, che raccoglie i dati dall'input, trasforma un modello in una stringa utilizzando JSON.stringify()e consente a un utente di modificare questo modello in modo tale che i campi di input vengano aggiornati se l' <textarea>elemento viene aggiornato e viceversa. Una sorta di rilegatura a due vie :)

Il problema è che la stringa stessa sembra brutta e vorrei formattarla in modo che assomiglia a questo:

inserisci qui la descrizione dell'immagine

E non come sembra ora:

inserisci qui la descrizione dell'immagine

Qualche idea su come questo possa essere realizzato? Se hai bisogno di ulteriori informazioni, non esitare a chiedere. Ogni risposta è molto apprezzata e risposta immediata.

Grazie.

PS Immagino che questo dovrebbe essere una sorta di direttiva o un filtro personalizzato. I dati stessi NON DEVONO essere modificati, solo l'output.

— amenoire
fonte

1

Puoi provare questo? Nella textarea, premi invio e formatta la stringa risultante come desiderato. Quindi nel tuo $watch(basato sulla risposta alla domanda precedente) sul modello textarea, puoi fare a console.log()e vedere quale valore ottieni nella stringa per il tasto Invio - penso sia "/ n"

— callmekatootie

1

Sulla base di ciò, posso suggerire come formattare il testo

— callmekatootie

{"anchorPosition": "1", "difficoltà": "1", "includeInSequence": "1", "questionCount": "1"}

— amenoire

Fondamentalmente non è cambiato nulla dopo che String è stato formattato.

— amenoire

Vedi le risposte di seguito: aiutano?

— callmekatootie

65

È possibile utilizzare un parametro facoltativo di JSON.stringify()

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

Parametri

valore Il valore da convertire in una stringa JSON.

replacer Se una funzione, trasforma i valori e le proprietà incontrati durante la stringa; se un array, specifica l'insieme di proprietà incluse negli oggetti nella stringa finale. Una descrizione dettagliata della funzione di sostituzione è fornita nell'articolo della guida javaScript Utilizzo di JSON nativo.

spazio Fa sì che la stringa risultante sia stampata in modo carino.

Per esempio:

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

ti darà il seguente risultato:

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

— Lukasz Wiktor
fonte

5

nota che questo preserva la $$hashKeyproprietà angolare utilizza per il monitoraggio del modello interno

— PixnBits

1

Puoi anche fare JSON.stringify(object, null, 2)dove 2 è il numero di caratteri di spazio bianco.

— MrE

@ Lukasz, posso evitare il $$ Hashkey?

— Md Aslam

433

Angular ha un built-in filterper la visualizzazioneJSON

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

Notare l'uso del pretag-per conservare spazi e interruzioni di riga

Demo:

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>

Espandi lo snippet

C'è anche un angular.toJsonmetodo, ma non ci ho giocato ( Documenti )

— ivarni
fonte

1

Sì, lo so già. Ma non posso creare questo filtro perché la textarea stessa è un modello.

— amenoire

Questo è così semplice, eppure così utile: D

— Jamie Street

2

@ ra170 Sii così gentile da leggere attentamente l'intera domanda, non solo il titolo. Chiedevo qualcosa di leggermente diverso da un semplice filtro json.

— amenoire

Tieni presente che la proprietà del <pre>tag non deve essere white-spaceimpostata su normalo no-wrap. Altrimenti, il tuo JSON non sarebbe rientrato come desideri.

— falconepl

3

Avevo problemi ma stavo facendo a meno <pre> .... ho visto questa risposta e ho risolto .... grazie !!

— Lucas

23

Se stai cercando di rendere JSON come HTML e può essere compresso / aperto, puoi usare questa direttiva che ho appena creato per renderlo bene:

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

inserisci qui la descrizione dell'immagine

— Mohsen
fonte

11

Oltre al filtro angolarejson già citato, c'è anche la funzione angolaretoJson() .

angular.toJson(obj, pretty);

Il secondo parametro di questa funzione consente di attivare la stampa carina e impostare il numero di spazi da utilizzare.

Se impostato su true, l'output JSON conterrà nuove righe e spazi bianchi. Se impostato su un numero intero, l'output JSON conterrà quel numero di spazi per rientro.

(predefinito: 2)

— Daniel Haley
fonte

la mia pagina è bloccata quando gli do un array di 1000 oggetti

— Asqan

Youvariable = angular.toJson ...., come hai scritto, sembra che il risultato sia abbastanza

— Márcio Rossato

6

Immagino che tu voglia usare per modificare il testo json. Quindi puoi usare la via di ivarni:

{{dati | json}}

e aggiungi un attributo adition da fare

 modificabile


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

Spero che questo possa aiutarti.

— Joy Ge
fonte

2

Se vuoi formattare il JSON e anche evidenziare la sintassi, puoi usare la ng-prettyjsondirettiva. Vedi il pacchetto npm.

Ecco come usarlo: <pre pretty-json="jsonObject"></pre>

— Nayan
fonte