Js动态解析多层级json数据生成html页面

原文链接：https://blog.csdn.net/black_cat7/article/details/145777832

// 示例一：解析单层 JSON 数据生成 HTML 列表
function renderSimpleJson(jsonData) {
    const container = document.getElementById('container'); // 获取容器元素
    const ul = document.createElement('ul'); // 创建无序列表

    jsonData.forEach(item => {
        const li = document.createElement('li'); // 创建列表项
        li.textContent = item.name; // 设置文本内容
        ul.appendChild(li); // 将列表项添加到无序列表中
    });

    container.innerHTML = ''; // 清空容器内容
    container.appendChild(ul); // 将无序列表添加到容器中
}

const simpleJson = [
    { name: '苹果' },
    { name: '香蕉' },
    { name: '橙子' }
];
renderSimpleJson(simpleJson);

　　

// 示例二：解析多层级 JSON 数据生成树形结构
function renderNestedJson(jsonData, parentElement) {
    const ul = document.createElement('ul'); // 创建无序列表

    jsonData.forEach(item => {
        const li = document.createElement('li'); // 创建列表项
        li.textContent = item.name; // 设置文本内容

        if (item.children && item.children.length > 0) {
            renderNestedJson(item.children, li); // 递归调用处理子节点
        }

        ul.appendChild(li); // 将列表项添加到无序列表中
    });

    parentElement.appendChild(ul); // 将无序列表添加到父元素中
}

const nestedJson = [
    {
        name: '水果',
        children: [ { name: '苹果' },
            { name: '香蕉' }
        ]
    },
    {
        name: '蔬菜',
        children: [
            { name: '胡萝卜' },
            { name: '土豆' }
        ]
    }
];

const container = document.getElementById('container');
container.innerHTML = ''; // 清空容器内容
renderNestedJson(nestedJson, container);

// 示例三：解析 JSON 数据生成表格
function renderTableFromJson(jsonData) {
    const container = document.getElementById('container'); // 获取容器元素
    const table = document.createElement('table'); // 创建表格
    const thead = document.createElement('thead'); // 创建表头
    const tbody = document.createElement('tbody'); // 创建表体

    // 添加表头
    const headerRow = document.createElement('tr'); // 创建表头行
    Object.keys(jsonData[0]).forEach(key => {
        const th = document.createElement('th'); // 创建表头单元格
        th.textContent = key;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    // 添加表体
    jsonData.forEach(row => {
     const tr = document.createElement('tr'); // 创建数据行
Object.values(row).forEach(value => {
            const td = document.createElement('td'); // 创建数据单元格
            td.textContent = value;
            tr.appendChild(td);
        });
        tbody.appendChild(tr);
    });

    table.appendChild(thead); // 将表头添加到表格中
    table.appendChild(tbody); // 将表体添加到表格中
    container.innerHTML = ''; // 清空容器内容
 container.appendChild(table); // 将表格添加到容器中
}

const tableJson = [
    { name: '张三', age: 25, city: '北京' },
    { name: '李四', age: 30, city: '上海' },
    { name: '王五', age: 35, city: '广州' }
];

renderTableFromJson(tableJson);

// 示例四：解析 JSON 数据生成卡片布局
function renderCardsFromJson(jsonData) {
    const container = document.getElementById('container'); // 获取容器元素
    container.innerHTML = ''; // 清空容器内容

    jsonData.forEach(item => {
        const card = document.createElement('div'); // 创建卡片容器
        card.className = 'card'; // 添加样式类名

        const title = document.createElement('h3'); // 创建标题
        title.textContent = item.title;

        const description = document.createElement('p'); // 创建描述
        description.textContent = item.description;

        card.appendChild(title); // 将标题添加到卡片中
        card.appendChild(description); // 将描述添加到卡片中
        container.appendChild(card); // 将卡片添加到容器中
    });
}

const cardsJson = [
    { title: '卡片1', description: '这是第一个卡片的内容' },
    { title: '卡片2', description: '这是第二个卡片的内容' },
    { title: '卡片3', description: '这是第三个卡片的内容' }
];

renderCardsFromJson(cardsJson);

// 示例五：解析 JSON 数据生成动态表单
function renderFormFromJson(jsonData) {
    const container = document.getElementById('container'); // 获取容器元素
    const form = document.createElement('form'); // 创建表单

    jsonData.forEach(field => {
        const div = document.createElement('div'); // 创建字段容器
        const label = document.createElement('label'); // 创建标签
        label.setAttribute('for', field.id); // 设置关联属性
        label.textContent = field.label;

        const input = document.createElement('input'); // 创建输入框
        input.setAttribute('id', field.id);
        input.setAttribute('type', field.type || 'text');

        div.appendChild(label); // 将标签添加到字段容器中
        div.appendChild(input); // 将输入框添加到字段容器中
        form.appendChild(div); // 将字段容器添加到表单中
    });

    const submitButton = document.createElement('button'); // 创建提交按钮
    submitButton.textContent = '提交';
    submitButton.type = 'submit';
    form.appendChild(submitButton); // 将提交按钮添加到表单中

    container.innerHTML = ''; // 清空容器内容
    container.appendChild(form); // 将表单添加到容器中
}

const formJson = [
    { id: 'name', label: '姓名' },
    { id: 'email', label: '邮箱', type: 'email' },
    { id: 'password', label: '密码', type: 'password' }
];

renderFormFromJson(formJson);