一个题目展示的问题

浪法师
140 阅读4分钟

一、需求

这时在一个项目开发过程中需要展示多级分类的题目。

题目需求：点击如市食药安办时，只显示scoreUser包含市食药安办的题目，点击到其他用户类型时显示其他类型的题目。

题目的数据类型如下

dataArr = [
    {
          "itemNo": "1",
          "itemContent": "落实党政同责和属地管理责任（3分）",
          "secondLevel": [
              {
                  "itemNo": "1.1",
                  "itemContent": "落实党政同责和属地管理责任（3分）",
                  "thirdLevel": [
                      {
                          "itemNo": "1.1.1",
                          "scoreUser": "市食药安办,市市场监管局-食品协调处,市市场监管局-食品经营处,市卫生健康委",
                          "itemContent": "按照《中共中央 国务院关于深化改革加强食品安全工作XXXX",
                      }
                  ]
              },
              {
                  "itemNo": "1.2",
                  "itemContent": "落实党政同责和属地管理责任（3分）",
                  "thirdLevel": [
                      {
                          "itemNo": "1.2.1",
                          "scoreUser": "市市场监管局-稽查处,市食药安办",
                          "itemContent": "按照《中共中央 国务院关于深化改革加强食品安全工作XXXX",
                      }
                  ]
              },
              
              
              
          ]
    },
    {
          "itemNo": "2",
          "itemContent": "落实党政同责和属地管理责任（3分）",
          "secondLevel": [
              {
                  "itemNo": "2.1",
                  "itemContent": "落实党政同责和属地管理责任（3分）",
                  "thirdLevel": [
                      {
                          "itemNo": "2.1.1",
                          "scoreUser": "市市场监管局-食品经营处,市卫生健康委,市市场监管局-食品协调处",
                          "itemContent": "按照《中共中央 国务院关于深化改革加强食品安全工作XXXX",
                      }
                  ]
              },
              {
                  "itemNo": "2.2",
                  "itemContent": "落实党政同责和属地管理责任（3分）",
                  "thirdLevel": [
                      {
                          "itemNo": "2.2.1",
                          "scoreUser": "市市场监管局-稽查处,市卫生健康委,市市场监管局-食品协调处",
                          "itemContent": "按照《中共中央 国务院关于深化改革加强食品安全工作XXXX",
                      }
                  ]
              },
          ]
    }
]

二、问题分析

其实这个需求本身不难，主要是找到重点

  • 首选我们要去确定哪些是我们需要的数据
  • 拿到确定的数据后，我们要去根据数据拿数据的编号
  • 然后根据编号来重新组装数据

三、编写代码

  1. 首先我们需要重新组装题目，重组数据重要的是我们需要知道哪些题目才是我们想要的，那么我们就要去将这里题目的编号存起来，方便后边重组题目。 这里去找thirdLevel中的scoreUser。
thirdItemNoList=[]
userType='市市场监管局-食品协调处'
// 根据数据类型，这里我们可以使用循环来出来找到`thirdLevel`
dataArr.forEach(item => {
  item.secondLevel.forEach(secondItem => {
    secondItem.thirdLevel.forEach(thirdItem => {
      if(thirdItem.scoreUser.includes(userType)) {
         // 在这里我们能够拿到包含userType的数据的编号itemNo
        console.log(thirdItem.itemNo+userType)
        // 现在需要我们来那当前题目的题号，这样后面才方便去查找我们需要的数据
        thirdItemNoList.push(thirdItem.itemNo)
      } 
    })
  })
})
  1. 在这里我们就拿到了题目的三级编号，拿到编号，我们需要拿到二级题目的标号还有一级题目的编号。因为已经拿到了itemNoList，这里只需要进行切割，就能拿到二级和一级的编号了。
itemNoList=[];// 所有一级二级三级题目的编号
thirdItemNoList.forEach((item,index) => {
  if(!itemNoList.includes(item.slice(0,1))) {
    itemNoList.push(item.slice(0,1))
  }
  if(!itemNoList.includes(item.slice(0,3))) {
    itemNoList.push(item.slice(0,3))
  }
  if(!itemNoList.includes(item)) {
    itemNoList.push(item)
  }
})
  1. 拿到itemNoList,这时离最后的题目重组就只剩下一步了，这里只需要把匹配到的题目拿出来就可以了

// 依然是循环数据，通过includes来判断当前是否包含这个分类，这里需要从第三级数据可以组装
newArr=[];// 新数组 
dataArr.forEach((item,index) => {
   // 首先来判断是有这个一级大类，如果有在进行下一步，没有不需要考虑
  if(itemNoList.includes(item.itemNo)) {
    let secondLevel = []
    // 当前需要先去找第三级的数据
    item.secondLevel.forEach(secondItem => {
      // 判断是否有第三类，有的话就将数据填进去。这里定义一个空的三级数据，
      let thirdLevel = []
      if(itemNoList.includes(secondItem.itemNo)) {
        secondItem.thirdLevel.forEach(thirdItem => {
          if(itemNoList.includes(thirdItem.itemNo.trim())) {
            thirdLevel.push(thirdItem)
          }
        })
        // 将三级数据赋值给它的父类
        secondItem.thirdLevel = thirdLevel
        secondLevel.push(secondItem)
      }
    })
    // 将二级数据赋值给它的父类
    item.secondLevel = secondLevel
    newArr.push(item)
  }
})

到这里就将需求解决掉了，但是这样的数据会有问题吗，答案是会的。

优化

itemNo的问题

itemNo是我们最重要的字段之一，这个数据会不会出现前后空值呢，我们不确定，因此，这里还是需要优化的

// 第一个优化位置
thirdItemNoList.push(thirdItem.itemNo.trim())
// 第二个优化位置
if(itemNoList.includes(thirdItem.itemNo.trim())) {
    thirdLevel.push(thirdItem)
}

编号列表的问题

我们的编号列表采用的是slice截取，这里我们写的是固定式1和3,在题目没有超过两位数的时候，这里是没有问题的，但如果超过两位数，那么就会变成灾难。因为你截取少了一位，因此这里我们应该使用indexOf和lastIndexOf，让它们动态的去找截取的位置。

if(!itemNoList.includes(item.slice(0,item.indexOf('.')))) {
    itemNoList.push(item.slice(0,item.indexOf('.')))
}
if(!itemNoList.includes(item.slice(0,item.lastIndexOf('.')))) {
   itemNoList.push(item.slice(0,item.lastIndexOf('.')))
}

在此将问题陈述下来，希望能帮到有同样问题的朋友们，更多请关注公众号：积雷山摩云洞

本文正在参加「金石计划 . 瓜分6万现金大奖」

avatar
文章
阅读
粉丝