zoukankan      html  css  js  c++  java
  • Egg.js 实现一维的对象数组转化为树形数组

    方式一:后端处理

    1.增加 tools service

    app/service/tools.js

    /**
     * 构建树形结构数据
     * @param {*} data
     */
    buildTree(data) {
      const res = [];
      // 找出所有根节点
      for(let item of data){
        if(!item.pid){
          item.children = getNode(item.id);
          res.push(item);
        }
      }
    
      // 传入根节点id 递归查找所有子节点
      function getNode(id) {
        const node = [];
        for(const item of data){
          if(item.pid === id){
            item.children = getNode(item.id);
            node.push(item);
          }
        }
        if(node.length === 0) return;
        return node;
      }
      return res;
    }

    2.获取 数据库 一维的对象数组

    app/service/food.js

    return await app.model.Food.findAll({
      raw: true // 设置为 true,即可返回源数据
    });

    3.处理后返回前端

    app/controller/food.js

    async lists() {
      const { ctx } = this;
      const data = await ctx.service.food.lists();
      if(data){
        ctx.body = {
          code: 200,
          message: '列表查询成功',
          data: ctx.service.tools.buildTree(data)
        }
      }else{
        ctx.body = {
          code: 500,
          message: '列表查询失败',
          data: {}
        }
      }
    }

    方式二:前端处理

    async componentDidMount() {
      let { data } = await axios.get(`${BaseUrl}/food/lists`);
      this.listData = data.data;
      this.setState({
        list: this._buildTree(0) // 一级pid为0
      });
    }
    
    // 实现一维的对象数组转化为树形数组
    _buildTree = (id) => {
      const data = this.listData.filter((item) => item.pid === id);
    
      data.forEach(item => {
        item.children = this._buildTree(item.id);
      });
    
      return data;
    }
    

    效果图

  • 相关阅读:
    WebRTC中的NetEQ
    VoIP基本原理
    NetEQ主要文件简介
    声纹识别
    杂记(2019.04.13)
    概率论基础复习
    机器学习复习:模型评估指标
    传统机器学习算法复习:逻辑回归、因子分解机和梯度提升树
    Tensorflow中循环神经网络及其Wrappers
    einsum:爱因斯坦求和约定
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12485441.html
Copyright © 2011-2022 走看看