js递归便利数组套对象格式并添加字段

发布于 2020-10-31  1072 次阅读


递归便利数组套对象格式的数据

在开发中,我们有时会在使用UI库的时候应为一些数据格式上的问题,后端给我们的数据格式和UI库要求你的并不相同,而且还不好修改的情况下就需要我们去给数据做一些处理来使得这个数据符合UI库规定的要求才能使用

然后我就写了一个小算法来解决这个在开发中遇到的问题

state = {
    result: [
      {
        value: '1',
        menu: [
          {
            value: '1-1',
            menu: [
              {
                value: '1-1-1',
                menu: [],
              },
            ],
          },
          {
            value: '1-2',
            menu: [
              {
                value: '1-2-1',
                menu: [],
              },
            ],
          },
          {
            value: '1-3',
            menu: [],
          },
        ],
      },
      {
        value: '2',
        menu: [
          {
            value: '2-1',
            menu: [
              {
                value: '2-1-1',
                menu: [],
              },
            ],
          },
          {
            value: '2-2',
            menu: [
              {
                value: '2-2-1',
                menu: [],
              },
            ],
          },
          {
            value: '2-3',
            menu: [],
          },
        ],
      }
    ],
  };
 componentDidMount() {
    let treeData = JSON.parse(JSON.stringify(this.state.result));
    let arr = []; // 新的数据
    treeData.forEach(item => { // 首先便利要修改的数据
      arr.push(this.getTree(item)) // 数据组装
    })
    this.setState({
      result: arr
    })
    console.log(arr, '--res---res--')
  }

  getTree = (data) => {
    data.title = data.value; // 要添加的字段
    data.children = data.menu; // 要添加的字段
    data.children.forEach((item) => {
      if(item.menu && item.menu.length > 0) { // 判断是否有子节点
        this.getTree(item) // 递归调用
      } else {
        item.title = item.value;
      }
    })
    return data; // 返回新数据
  }

这样就可以通过一个小算法来解决这个问题了


I struggle for what I love, so I can be happy here.