显示 Pretty HTML JSON 数据 - Javascript

在处理 JSON 数据时，往往需要将其显示在前端页面上。但是，原始的 JSON 格式往往不够美观，难以阅读。因此，我们需要对其进行美化处理，使其更加易读。

在 Javascript 中，我们可以使用第三方库来实现 JSON 数据的美化，下面我们介绍两种常用的库。

1. JSON.stringify()

JSON.stringify() 是 Javascript 的内置函数，可以将一个 JSON 对象转化为字符串。

const obj = { name: 'John', age: 25 };
const json = JSON.stringify(obj);
console.log(json);
// {"name":"John","age":25}

我们可以在第二个参数中传入函数来处理 JSON 数据的格式。其中，replacer 函数返回一个新的对应键的值，space 数字用于缩进 JSON 数据的字符串。

const obj = { name: 'John', age: 25, address: { province: 'Guangdong', city: 'Shenzhen' } };
const json = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}, 2);
console.log(json);

输出：

{
  "name": "JOHN",
  "age": 25,
  "address": {
    "province": "Guandong",
    "city": "Shenzhen"
  }
}

2. prettier

prettier 是一种常用的代码格式化工具，可以对多种语言的代码进行美化。

首先，我们需要安装 prettier:

npm install --save-dev prettier

接着，我们可以在 Javascript 中引入 prettier，然后使用其提供的 format() 方法对 JSON 数据进行美化：

import prettier from 'prettier';

const obj = { name: 'John', age: 25, address: { province: 'Guangdong', city: 'Shenzhen' } };
const json = JSON.stringify(obj);

const prettyJson = prettier.format(json, { parser: 'json' });
console.log(prettyJson);

输出：

{
  "name": "John",
  "age": 25,
  "address": {
    "province": "Guandong",
    "city": "Shenzhen"
  }
}

小结

以上是两种常用的美化 JSON 数据的方法。如果仅需要简单的美化，可以使用 JSON.stringify()；如果需要更为全面的美化工具，则可以使用 prettier。这些工具，都可以帮助我们更加方便地处理和阅读 JSON 数据。