JavaScriptfor循环的树形菜单栏·

在此声明一下嗷兄弟闷儿！我没写样式纯粹是console.log()打印控制面板的！

全局声明一个data；

let data;

然后去获取到json的假数据

let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/menu.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {data = JSON.parse(xhr.responseText);// 调用展示商品的函数console.log(data);fun(data);}
};

然后function一个变量进行调用！加上下面的自己去看吧，家人们

function fun(data) {let arr = [];for (let i in data) {if (data[i].pid == 0) {data[i].children = []; // 初始化 children 数组for (let j in data) {if (data[j].pid == data[i].id) { // 找到当前节点的子节点data[i].children.push(data[j]); // 将子节点添加到 children 数组中}data[j].childrens = [];for (let k in data) {if (data[k].pid == data[j].id) {data[j].childrens.push(data[k]);}}}arr.push(data[i]); // 将构建好的根节点添加到 arr 中}}console.log(arr);
}