在前端开发中，我们经常需要调试和展示 JSON 数据，而且要求输出的格式必须易读、有序、美观。这时候，我们就可以使用 npm 包 ember-json-pretty 来解决这个问题。
ember-json-pretty 简介
ember-json-pretty 是一个基于 Ember 框架的 JSON 格式美化工具，它可以将 JSON 数据按照缩进、换行等方式排版，使其更易读、易懂。
该插件支持自定义参数设置，能够针对不同的数据源进行定制化配置，具有很好的灵活性。并且该插件已经在众多 Ember 项目中广泛应用。
安装使用
首先，我们需要在项目中安装 ember-json-pretty：
ember install ember-json-pretty
安装完成后，我们就可以在项目中使用该插件。
首先，我们需要在模板文件中定义一个标签，来承载 JSON 数据的展示：
<div id="json-display"></div>
然后，我们就可以通过下面的代码来渲染 JSON 数据：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ -- ------- - ---- -----------------
------ - -------- - ---- ----------------
------ - -------- - ---- ----------------
------ ---------- ---- --------------------
------ ------- ----- -------------------- ------- --------- -
----------------- ------
-------- -------
--- ------ -
----- ---- - -
----- -------
---- ---
-------- ----------- ----------
-------- -
------- ---- ----- -----
----- ---- ---------
------ -----
---- --------
--
--
-- -- ---------- -----
----- -------- - --- -----------------
------ ------------------------------
-
------------------------------------
-------------- -
----- ---- - -----------------------------
----- -------- - --- -----------------
--------
-------------------------------
---------- - --------------------
-
-如上所示，我们需要先创建一个 JSONPretty 的实例对象，然后将需要美化的 JSON 数据传入该对象。最后，使用 toString() 方法将美化后的数据渲染到页面。
自定义配置
ember-json-pretty 还支持自定义参数设置。例如，我们可以更改展示样式，或者选择只展示 JSON 数据的部分字段。
const jsonData = new JSONPretty(data, {
themeClassName: 'my-favorite-theme',
keysToShow: ['name', 'age', 'address'],
});如上所示，在创建 JSONPretty 实例对象时，我们可以传递一个配置对象，该对象包含了一些可配置参数。其中，themeClassName 用于指定样式名，可以自定义样式表；keysToShow 可以指定展示数据的指定字段。
总结
使用 ember-json-pretty 可以使 JSON 数据格式拥有更好的可读性和可视化效果，提高了前端数据调试和展示的效率。上述介绍的内容只是该插件的基本使用方式和部分功能。在实际项目中，我们可以根据需要进行更复杂的参数设置和组件封装。
完整示例代码如下：
<!-- app/templates/components/json-display.hbs -->
<div id="json-display">{{{json}}}</div>-- -------------------- ---- -------
-- ------------------------------
------ --------- ---- ---------------------
------ - ------ -- ------- - ---- -----------------
------ - -------- - ---- ----------------
------ - -------- - ---- ----------------
------ ---------- ---- --------------------
------ ------- ----- -------------------- ------- --------- -
----------------- ------
-------- -------
--- ------ -
----- ---- - -
----- -------
---- ---
-------- ----------- ----------
-------- -
------- ---- ----- -----
----- ---- ---------
------ -----
---- --------
--
--
-- -- ---------- -----
----- -------- - --- -----------------
------ ------------------------------
-
------------------------------------
-------------- -
----- ---- - -----------------------------
----- -------- - --- -----------------
--------
-------------------------------
---------- - --------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e20a563576b7b1ecde3