json转html

作者：﹏〃对不起╮他是为你哭了发布日期:2025-02-16 浏览:90

<!DOCTYPE html>
<html>
<head>
    <title>JSON转HTML示例</title>
    <script>
        // 示例JSON数据
        const jsonData = {
            "name": "张三",
            "age": 28,
            "address": {
                "city": "北京",
                "street": "朝阳区"
            },
            "hobbies": ["读书", "运动", "旅行"]
        };

        // 将JSON数据转换为HTML内容
        function jsonToHtml(json) {
            let htmlContent = "<ul>";
            for (let key in json) {
                if (typeof json[key] === 'object' && !Array.isArray(json[key])) {
                    // 如果值是对象，递归处理
                    htmlContent += `<li>${key}: <ul>${jsonToHtml(json[key])}</ul></li>`;
                } else if (Array.isArray(json[key])) {
                    // 如果值是数组，递归处理每个元素
                    htmlContent += `<li>${key}: <ul>`;
                    json[key].forEach(item => {
                        htmlContent += `<li>${item}</li>`;
                    });
                    htmlContent += "</ul></li>";
                } else {
                    // 普通键值对直接显示
                    htmlContent += `<li>${key}: ${json[key]}</li>`;
                }
            }
            htmlContent += "</ul>";
            return htmlContent;
        }

        // 将生成的HTML内容插入到页面中
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("output").innerHTML = jsonToHtml(jsonData);
        });
    </script>
</head>
<body>
    <h1>JSON转HTML示例</h1>
    <div id="output"></div>
</body>
</html>

解释说明：

JSON 数据：jsonData 是一个示例 JSON 对象，包含一些基本的键值对、嵌套对象和数组。
jsonToHtml 函数：该函数递归地遍历 JSON 对象，并根据不同的数据类型（普通键值对、对象、数组）生成相应的 HTML 结构。
DOM 加载事件：当页面加载完成后，调用 jsonToHtml 函数将生成的 HTML 内容插入到页面中的 #output 元素内。
HTML 输出：最终，JSON 数据将以嵌套的无序列表 (<ul>) 形式展示在网页上。

上一篇：html css js三者之间的关系

下一篇：postcss.config.js