如何从多层JSON数据递归创建UL/LI_从json数据向ul添加li_从ul li div获取数据并存储到json中。 - 腾讯云开发者社区

基础概念

多层JSON数据是指嵌套的JSON对象，其中每个对象可能包含其他对象或数组。递归是一种编程技术，允许函数调用自身来处理嵌套的数据结构。

类型

在这个场景中，我们主要处理的是JSON对象和数组。

应用场景

当需要将多层嵌套的JSON数据转换为HTML列表（如UL/LI）时，递归方法非常有用。这在数据可视化、前端展示等方面有广泛应用。

示例代码

以下是一个使用JavaScript递归创建UL/LI的示例代码：

function createListFromJson(jsonData) {
    let ul = document.createElement('ul');
    jsonData.forEach(item => {
        let li = document.createElement('li');
        li.textContent = item.name || 'Unnamed';
        if (item.children && item.children.length > 0) {
            li.appendChild(createListFromJson(item.children));
        }
        ul.appendChild(li);
    });
    return ul;
}

// 假设我们有以下JSON数据
let jsonData = [
    {
        name: 'Item 1',
        children: [
            { name: 'Subitem 1.1' },
            { name: 'Subitem 1.2' }
        ]
    },
    {
        name: 'Item 2',
        children: [
            { name: 'Subitem 2.1' },
            {
                name: 'Subitem 2.2',
                children: [
                    { name: 'Subitem 2.2.1' }
                ]
            }
        ]
    }
];

// 使用函数创建UL/LI结构
let listElement = createListFromJson(jsonData);

// 将生成的HTML元素添加到页面中
document.body.appendChild(listElement);