// 示例一：解析單層 JSON 數(shù)據(jù)生成 HTML 列表
function renderSimpleJson(jsonData) {
    const container = document.getElementById('container'); // 獲取容器元素
    const ul = document.createElement('ul'); // 創(chuàng)建無(wú)序列表

    jsonData.forEach(item => {
        const li = document.createElement('li'); // 創(chuàng)建列表項(xiàng)
        li.textContent = item.name; // 設(shè)置文本內(nèi)容
        ul.appendChild(li); // 將列表項(xiàng)添加到無(wú)序列表中
    });

    container.innerHTML = ''; // 清空容器內(nèi)容
    container.appendChild(ul); // 將無(wú)序列表添加到容器中
}

const simpleJson = [
    { name: '蘋(píng)果' },
    { name: '香蕉' },
    { name: '橙子' }
];

renderSimpleJson(simpleJson);

// 示例二：解析多層級(jí) JSON 數(shù)據(jù)生成樹(shù)形結(jié)構(gòu)
function renderNestedJson(jsonData, parentElement) {
    const ul = document.createElement('ul'); // 創(chuàng)建無(wú)序列表

    jsonData.forEach(item => {
        const li = document.createElement('li'); // 創(chuàng)建列表項(xiàng)
        li.textContent = item.name; // 設(shè)置文本內(nèi)容

        if (item.children && item.children.length > 0) {
            renderNestedJson(item.children, li); // 遞歸調(diào)用處理子節(jié)點(diǎn)
        }

        ul.appendChild(li); // 將列表項(xiàng)添加到無(wú)序列表中
    });

    parentElement.appendChild(ul); // 將無(wú)序列表添加到父元素中
}

const nestedJson = [
    {
        name: '水果',
        children: [
            { name: '蘋(píng)果' },
            { name: '香蕉' }
        ]
    },
    {
        name: '蔬菜',
        children: [
            { name: '胡蘿卜' },
            { name: '土豆' }
        ]
    }
];

const container = document.getElementById('container');
container.innerHTML = ''; // 清空容器內(nèi)容
renderNestedJson(nestedJson, container);

// 示例三：解析 JSON 數(shù)據(jù)生成表格
function renderTableFromJson(jsonData) {
    const container = document.getElementById('container'); // 獲取容器元素
    const table = document.createElement('table'); // 創(chuàng)建表格
    const thead = document.createElement('thead'); // 創(chuàng)建表頭
    const tbody = document.createElement('tbody'); // 創(chuàng)建表體

    // 添加表頭
    const headerRow = document.createElement('tr'); // 創(chuàng)建表頭行
    Object.keys(jsonData[0]).forEach(key => {
        const th = document.createElement('th'); // 創(chuàng)建表頭單元格
        th.textContent = key;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    // 添加表體
    jsonData.forEach(row => {
        const tr = document.createElement('tr'); // 創(chuàng)建數(shù)據(jù)行
        Object.values(row).forEach(value => {
            const td = document.createElement('td'); // 創(chuàng)建數(shù)據(jù)單元格
            td.textContent = value;
            tr.appendChild(td);
        });
        tbody.appendChild(tr);
    });

    table.appendChild(thead); // 將表頭添加到表格中
    table.appendChild(tbody); // 將表體添加到表格中
    container.innerHTML = ''; // 清空容器內(nèi)容
    container.appendChild(table); // 將表格添加到容器中
}

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

renderTableFromJson(tableJson);

// 示例四：解析 JSON 數(shù)據(jù)生成卡片布局
function renderCardsFromJson(jsonData) {
    const container = document.getElementById('container'); // 獲取容器元素
    container.innerHTML = ''; // 清空容器內(nèi)容

    jsonData.forEach(item => {
        const card = document.createElement('div'); // 創(chuàng)建卡片容器
        card.className = 'card'; // 添加樣式類(lèi)名

        const title = document.createElement('h3'); // 創(chuàng)建標(biāo)題
        title.textContent = item.title;

        const description = document.createElement('p'); // 創(chuàng)建描述
        description.textContent = item.description;

        card.appendChild(title); // 將標(biāo)題添加到卡片中
        card.appendChild(description); // 將描述添加到卡片中
        container.appendChild(card); // 將卡片添加到容器中
    });
}

const cardsJson = [
    { title: '卡片1', description: '這是第一個(gè)卡片的內(nèi)容' },
    { title: '卡片2', description: '這是第二個(gè)卡片的內(nèi)容' },
    { title: '卡片3', description: '這是第三個(gè)卡片的內(nèi)容' }
];

renderCardsFromJson(cardsJson);

// 示例五：解析 JSON 數(shù)據(jù)生成動(dòng)態(tài)表單
function renderFormFromJson(jsonData) {
    const container = document.getElementById('container'); // 獲取容器元素
    const form = document.createElement('form'); // 創(chuàng)建表單

    jsonData.forEach(field => {
        const div = document.createElement('div'); // 創(chuàng)建字段容器
        const label = document.createElement('label'); // 創(chuàng)建標(biāo)簽
        label.setAttribute('for', field.id); // 設(shè)置關(guān)聯(lián)屬性
        label.textContent = field.label;

        const input = document.createElement('input'); // 創(chuàng)建輸入框
        input.setAttribute('id', field.id);
        input.setAttribute('type', field.type || 'text');

        div.appendChild(label); // 將標(biāo)簽添加到字段容器中
        div.appendChild(input); // 將輸入框添加到字段容器中
        form.appendChild(div); // 將字段容器添加到表單中
    });

    const submitButton = document.createElement('button'); // 創(chuàng)建提交按鈕
    submitButton.textContent = '提交';
    submitButton.type = 'submit';
    form.appendChild(submitButton); // 將提交按鈕添加到表單中

    container.innerHTML = ''; // 清空容器內(nèi)容
    container.appendChild(form); // 將表單添加到容器中
}

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

renderFormFromJson(formJson);