Saída de string JSON no formato AngularJS

92

Eu tenho um aplicativo AngularJS, que coleta dados de entrada, transforma um modelo em uma string usando JSON.stringify()e permite que um usuário edite este modelo de forma que os campos de entrada sejam atualizados se o <textarea>elemento for atualizado e vice-versa. Algum tipo de ligação bidirecional :)

O problema é que a própria string parece feia e eu gostaria de formatá-la assim:

insira a descrição da imagem aqui

E não é o que parece agora:

insira a descrição da imagem aqui

Alguma ideia de como isso pode ser feito? Se você precisar de alguma informação adicional - não hesite em perguntar. Cada resposta é muito apreciada e respondida imediatamente.

Obrigado.

PS Acho que isso deve ser algum tipo de diretiva ou um filtro personalizado. Os próprios dados NÃO DEVEM ser alterados, apenas a saída.

javascript json string angularjs formatting amenoire
fonte
1
Você pode tentar isso - Na textarea, pressione enter e formate a string resultante conforme desejado. Então, em seu $watch(com base na resposta da pergunta anterior) sobre o modelo textarea, você pode fazer um console.log()e ver qual valor obtém na string para a tecla enter - acho que é "/ n"
callmekatootie
1
Com base nisso, posso sugerir como você pode formatar o texto
callmekatootie 01 de
{"anchorPosition": "1", "dificuldade": "1", "includeInSequence": "1", "questionCount": "1"}
amenoire
Basicamente, nada mudou depois que String foi formatada.
amenoire de
Veja as respostas abaixo - elas ajudam?
callmekatootie 01 de

Respostas:

65

Você pode usar um parâmetro opcional de JSON.stringify()

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

Parâmetros

  • valor O valor a ser convertido em uma string JSON.
  • substituto Se for uma função, transforma valores e propriedades encontrados durante a stringificação; se for uma matriz, especifica o conjunto de propriedades incluídas nos objetos na string final. Uma descrição detalhada da função de substituição é fornecida no artigo do guia javaScript Usando JSON nativo.
  • espaço Faz com que a string resultante seja bem impressa.

Por exemplo:

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

lhe dará o seguinte resultado:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"
Lukasz Wiktor
fonte
5
observe que isso preserva os $$hashKeyusos angulares de propriedade para rastreamento de modelo interno
PixnBits
1
Você também pode fazer JSON.stringify(object, null, 2)onde 2 é o número de caracteres de espaço em branco.
MrE
@ Lukasz, posso evitar o $$ Hashkey?
Md Aslam de
433

O Angular tem um recurso embutido filterpara mostrarJSON

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

Observe o uso da pre-tag para conservar espaços em branco e quebras de linha

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

Também tem um angular.toJsonmétodo, mas não brinquei com ele ( Docs )

ivarni
fonte
1
Sim, eu já sei disso. Mas não posso fazer esse filtro porque a própria textarea é um modelo.
amenoire
Isso é tão simples, mas tão útil: D
Jamie Street
2
@ ra170 Tenha a gentileza de ler toda a questão com atenção, não apenas o título. Eu estava pedindo uma coisa ligeiramente diferente do que um filtro JSON simples.
amenoire
Observe que sua <pre>tag não deve ter a white-spacepropriedade definida como normalou no-wrap. Caso contrário, seu JSON não seria recuado como você deseja.
falconepl
3
Eu estava tendo problemas mas estava passando sem <pre> .... Eu vi essa resposta e consertei .... obrigado !!
Lucas
11

Além do filtro angularjson já mencionado, existe também a função angulartoJson() .

angular.toJson(obj, pretty);

O segundo parâmetro desta função permite ativar a impressão bonita e definir o número de espaços a serem usados.

Se definido como verdadeiro, a saída JSON conterá novas linhas e espaços em branco. Se definido como um inteiro, a saída JSON conterá essa quantidade de espaços por recuo.

(padrão: 2)

Daniel Haley
fonte
minha página é bloqueada quando eu dou a ele um array de 1000 objetos
Asqan
Youvariable = angular.toJson ...., como você escreveu, parece o resultado bonito
Márcio Rossato
6

Eu acho que você deseja usar para editar o texto json. Então você pode usar o método do ivarni: 

{{data | json}}
e adicionar um atributo de adição para fazer 
 editável


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

Espero que isso possa ajudá-lo.

Joy Ge
fonte
2

Se você deseja formatar o JSON e também realçar a sintaxe, pode usar a ng-prettyjsondiretiva. Veja o pacote npm.

Aqui está como usá-lo: <pre pretty-json="jsonObject"></pre>

Nayan
fonte