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.

— 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

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

23

Se você está procurando renderizar JSON como HTML e ele pode ser recolhido / aberto, você pode usar esta diretiva que acabei de criar para renderizá-lo bem:

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

insira a descrição da imagem aqui

— Mohsen
fonte

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