在js中,处理一级分类和二级分类的数据格式

在码代码时, 我们经常会遇到需要把一级分类和二级分类进行数据格式处理的需求,现在把最简单的方法分享给大家~~~

// 声明一个数组, 用来存储分类数据
const oldCateList = [];

// 声明一个数组, 用来存储处理好的数据
let newCateList = [];

// 原有的数据格式(即构造的数据)
const arr = [
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1002,
    secondname: '一级分类-a1',
  },
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1003,
    secondname: '一级分类-a2',
  },
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1004,
    secondname: '一级分类-b1',
  },
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1005,
    secondname: '一级分类-b2',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2002,
    secondname: '二级分类-a1',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2003,
    secondname: '二级分类-a2',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2004,
    secondname: '二级分类-b1',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2005,
    secondname: '二级分类-b2',
  },
];

// 1. 遍历数组
arr.forEach(v => {
    // 2. 判断一级分类是否存在
    const findFirstid = oldCateList.find(item => item.value === v.firstid);
    if (findFirstid && v.secondid !== 0) {
      // 3. 一级分类如果存在, 则直接push二级分类
      findFirstid.children.push({
        label: v.secondname,
        value: v.secondid,
      });
    } else {
        // 4. 一级分类不存在
        const newValue = {
          label: v.firstname,
          value: v.firstid,
          children: [],
        };
        
        // 5. push二级分类
        if (v.secondid !== 0) {
          newValue.children.push({
            label: v.secondname,
            value: v.secondid,
          });
        }

        oldCateList.push(newValue);
    }
});

// 6. 排序
newCateList = oldCateList.sort((a, b) => a.value - b.value);

console.log(newCateList, 'newCateList');

为了提高代码的复用性, 可以把上面的代码抽成一个方法~~~

function getCateList(arr) {
    // 声明一个数组, 用来存储分类数据
    const oldCateList = [];

    // 声明一个数组, 用来存储处理好的数据
    let newCateList = [];
    
    // 1. 遍历数组
    arr.forEach(v => {
        // 2. 判断一级分类是否存在
        const findFirstid = oldCateList.find(item => item.value === v.firstid);
        if (findFirstid && v.secondid !== 0) {
          // 3. 一级分类如果存在, 则直接push二级分类
          findFirstid.children.push({
            label: v.secondname,
            value: v.secondid,
          });
        } else {
            // 4. 一级分类不存在
            const newValue = {
              label: v.firstname,
              value: v.firstid,
              children: [],
            };
        
            // 5. push二级分类
            if (v.secondid !== 0) {
              newValue.children.push({
                label: v.secondname,
                value: v.secondid,
              });
            }

            oldCateList.push(newValue);
        }
    });

    // 6. 排序
    newCateList = oldCateList.sort((a, b) => a.value - b.value);

    console.log(newCateList, 'newCateList');
}

const arr = [
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1002,
    secondname: '一级分类-a1',
  },
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1003,
    secondname: '一级分类-a2',
  },
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1004,
    secondname: '一级分类-b1',
  },
  {
    firstid: 1001,
    firstname: '一级分类',
    secondid: 1005,
    secondname: '一级分类-b2',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2002,
    secondname: '二级分类-a1',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2003,
    secondname: '二级分类-a2',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2004,
    secondname: '二级分类-b1',
  },
  {
    firstid: 2001,
    firstname: '二级分类',
    secondid: 2005,
    secondname: '二级分类-b2',
  },
];

getCateList(arr);