美文网首页深究JavaScript
接口响应父子结构的数据,前端重构数据结构为树形结构

接口响应父子结构的数据,前端重构数据结构为树形结构

作者: zhangweisep | 来源:发表于2020-03-17 15:00 被阅读0次
/**
 * 组织数据(把后端传递过来的数组数据组合成符合树形菜单的数据结构)
 * @param data:后端数据
 * @returns {Array}:组织好的数据结构
 */
function toTreeData(data) {
    var pos = {};
    var tree = [];
    var i = 0;
    while (data.length != 0) {
        //判定是否是根节点
        if (data[i].pid == 0) {
            tree.push({
                level: data[i].level,
                pid: data[i].pid,
                id: data[i].id,
                title: data[i].title,
                items: []
            });
            pos[data[i].id] = [tree.length - 1];
            data.splice(i, 1);
            i--;
        } else {
            var posArr = pos[data[i].pid];
            if (posArr != undefined) {
                var obj = tree[posArr[0]];
                for (var j = 1; j < posArr.length; j++) {
                    obj = obj.items[posArr[j]];
                }
                obj.items.push({
                    level: data[i].level,
                    pid: data[i].pid,
                    id: data[i].id,
                    title: data[i].title,
                    items: []
                });
                pos[data[i].id] = posArr.concat([obj.items.length - 1]);
                data.splice(i, 1);
                i--;
            }
        }
        i++;
        if (i > data.length - 1) {
            i = 0;
        }
    };
    return tree;
}

相关文章

  • 接口响应父子结构的数据,前端重构数据结构为树形结构

  • 《恋上数据结构与算法一》笔记(二十)总结

    目录 复杂度 线性数据结构 树形数据结构 线性+树形数据结构 一 复杂度 时间复杂度 空间复杂度 二 线性数据结构...

  • 数据结构简单介绍(一)

    数据结构 数据的逻辑结构 数据的存储结构 数据的运算 数据的逻辑结构 也叫数据结构 集合结构 线性结构 树形结构 ...

  • 数据结构与算法 - 查找

    数据结构与算法系列文章数据结构与算法 - 时间复杂度数据结构与算法 - 线性表数据结构与算法 - 树形结构数据结构...

  • 数据结构与算法

    参考链接:算法 数据结构与算法 iOS数据结构 和 算法 上 算法 1、数据结构: 集合结构: 线性结构: 树形结...

  • 【JS算法】JS数据结构

    JS的数据结构就2种,数组和链表链表可以演变成:树形结构、图形结构数组可以演变成:队列、栈树形结构是前端最重要的数...

  • 数据结构

    一. 数据结构的分类 集合结构 线性结构 树形结构 图形结构 二. 数据结构的存储 顺序存储结构 和 链式存储结构...

  • 线性表之动态数组

    1、什么是数据结构 数据结构是计算机存储、组织数据的方式,数据结构分为线性结构、树形结构、图形结构。 线性表就是线...

  • vue 菜单路由权限

    实现思路 通过一个 uid 请求后端路由权限接口 后端返回对应的路由权限给前端 json 转树形结构 树形结构数据...

  • 数据结构与算法 - 树形结构

    数据结构与算法系列文章数据结构与算法 - 时间复杂度数据结构与算法 - 线性表数据结构与算法 - 树形结构 目录 ...

网友评论

    本文标题:接口响应父子结构的数据,前端重构数据结构为树形结构

    本文链接:https://www.haomeiwen.com/subject/bodtyhtx.html