Используйте json pretty print в angularjs

Как я могу использовать эту json pretty print [http://jsfiddle.net/KJQ9K/] с помощью angularJS?

Предположим, что myJsonValue

{a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]}

Я хочу иметь возможность использовать ниже для рендеринга pre (как показано в примере)

Ответы

Ответ 1

Angular уже имеет json фильтр встроенный:

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

json после трубы | является Angular Filter. Вы можете сделать свой собственный настраиваемый фильтр, если хотите:

app.filter('prettyJSON', function () {
    function prettyPrintJson(json) {
      return JSON ? JSON.stringify(json, null, '  ') : 'your browser doesnt support JSON so cant pretty print';
    }
    return prettyPrintJson;
});

Чтобы использовать свой пользовательский фильтр prettyJSON:

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

Версия ES6 от @TeChn4K:

app.filter("prettyJSON", () => json => JSON.stringify(json, null, " "))

Ответ 2

Другой вариант - превратить функцию в фильтр...

app.filter('prettify', function () {

    function syntaxHighlight(json) {
        // ...
    }

    return syntaxHighlight;
});

HTML...

<pre ng-bind-html="json | prettify"></pre>

JsFiddle: http://jsfiddle.net/KSTe8/

Ответ 3

Простейший код:

app.filter('prettyJSON', function () {
    return function(json) { return angular.toJson(json, true); }
});

Не забудьте использовать тег <pre>

Ответ 4

У вас есть несколько вариантов. То, что я считаю наиболее "AngularJS", - это превратить ваш пользовательский объект в службу Angular:

myAngularModule.service('myPrettyPrintService', ,myObject );

Впрыскивание в контроллер:

myAngularModule.controller('myTestController', function(myPrettyPrintService){}

Затем внутри контроллера ссылайтесь на функции и сортируйте:

myPrettyPrintService.syntaxHighlight();

Поскольку все, что определено в JavaScript, глобально, вы можете технически просто получить доступ к нему внутри контроллера:

syntaxHighlight();

Это может испортить модульное тестирование, потому что оно добавляет внешнюю зависимость undefined к вашему контроллеру.