html页面展示json数据并格式化的方法

2023年5月27日上午9:15 • JavaScript

展示 JSON 数据并格式化，通常有以下两种方法：

方法一：通过 JavaScript 进行格式化

通过 JavaScript 获取到 JSON 数据之后，可以使用 JSON 的 stringify 方法进行格式化，再将格式化后的结果插入到 HTML 页面中即可。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>展示JSON数据并格式化的方法-示例1</title>
</head>
<body>
    <pre id="json"></pre>
    <script>
        const data = {
            "name": "张三",
            "age": 18,
            "hobby": ["游戏", "编程", "阅读"],
            "address": {
                "province": "上海市",
                "city": "上海市",
                "district": "徐汇区"
            }
        };
        const formattedData = JSON.stringify(data, null, 4);
        document.getElementById("json").innerHTML = formattedData;
    </script>
</body>
</html>

在上面的示例中，我们定义了一个简单的 JSON 数据，包含了一些基本的数据类型和复杂类型，包括了数组和对象。然后使用 JSON.stringify() 方法将其格式化，并将格式化后的结果插入到 HTML 页面中的 <pre> 元素中。

传给 JSON.stringify() 的第一个参数是需要格式化的 JSON 数据。第二个参数是替换器，可以用来控制如何过滤和转换结果。第三个参数是缩进空格数量，用来控制输出格式的缩进。

在上面的示例中，我们将缩进空格数量设为 4。

方法二：使用第三方库

除了用 JavaScript 格式化之外，还可以使用第三方库来展示格式化后的 JSON 数据。这些库通常提供了更多的展示选项，比如选择颜色主题、折叠展开等功能。

下面是几个常用的第三方库：

1. jQuery 插件 - jQuery JSONView

jQuery JSONView 是一个很受欢迎的 jQuery 插件，用于展示 JSON 数据并格式化。它支持展示基本类型、数组和嵌套对象等各种数据类型。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>展示JSON数据并格式化的方法-示例2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css" />
</head>
<body>
    <pre id="json"></pre>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
    <script>
        const data = {
            "name": "张三",
            "age": 18,
            "hobby": ["游戏", "编程", "阅读"],
            "address": {
                "province": "上海市",
                "city": "上海市",
                "district": "徐汇区"
            }
        };
        $('#json').JSONView(data);
    </script>
</body>
</html>

在上面的示例中，我们引入了 jQuery、jQuery JSONView 的 CSS 和 JavaScript 文件。然后在 <pre> 元素上调用了 JSONView() 方法来展示格式化后的 JSON 数据。

2. Vue 插件 - vue-json-pretty

vue-json-pretty 是一个 Vue 的插件，它提供了一个漂亮的 UI 来展示 JSON 数据，支持标签折叠和样式修改。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>展示JSON数据并格式化的方法-示例3</title>
    <link rel="stylesheet" href="https://unpkg.com/vue-json-pretty/lib/styles.css">
</head>
<body>
    <div id="app">
        <json-pretty :data="json"></json-pretty>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-json-pretty/lib/main.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                json: {
                    "name": "张三",
                    "age": 18,
                    "hobby": ["游戏", "编程", "阅读"],
                    "address": {
                        "province": "上海市",
                        "city": "上海市",
                        "district": "徐汇区"
                    }
                }
            },
        });
    </script>
</body>
</html>

在上面的示例中，我们引入了 Vue、vue-json-pretty 的 CSS 和 JavaScript 文件。然后在 Vue 中定义了一个 JSON 数据对象，并将其传递给 json-pretty 组件进行展示。

以上就是展示 JSON 数据并格式化的两种方法和两个示例，你可以根据需求选择其中一种方法来实现 JSON 数据的展示和格式化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html页面展示json数据并格式化的方法 - Python技术站