论js数据处理的重要性

今天接到一个需求：如图：

左侧的类目自成一块。右侧定额编号和定额名称依此展示。（本例基于react 、antd）

这个表格的诡异性就在明明是一个嵌套结构却采用平铺展示的方式，而且平铺的时候类目明明作为一栏却只能展示第一个。

先看看后端返回的数据结构：

"propertyQuotaList": [{
			"keyName": "瓷砖",
			"quotaList": [{
				
				"id": 15,
				"categoryId": 5,
				"name": "Daniel Walker",
				"quotaNum": "220000198607142169",
				
			}, {
				
				"id": 16,
				"categoryId": 5,
				"name": "Richard Johnson",
				"quotaNum": "420000197410194857",
				
			}, {
			
				"id": 17,
				"categoryId": 5,
				"name": "Sharon Robinson",
				"quotaNum": "51000019720210920X",
				
			}]
		}, {
			"keyName": "真皮沙发",
			"quotaList": [{
			
				"id": 1,
				"categoryId": 6,
				"name": "定额名称",
				"quotaNum": "12345678",
				
			}, {

				"id": 19,
				"categoryId": 6,
				"name": "23432",
				"quotaNum": "234234234",
				
			}, {
			
				"id": 20,
				"categoryId": 6,
				"name": "测试定额1",
				"quotaNum": "123213123",
				
			}, {
				
				"id": 21,
				"categoryId": 6,
				"name": "定额测试2",
				"quotaNum": "213123123",
				
			}, {
				
				"id": 22,
				"categoryId": 6,
				"name": "ghl测试123",
				
			}]
		}]

好家伙。数组里的json居然是这副德行？

最开始打算采用antd的table来处理后来发现还是自定义模拟一个更好控制。

关键的问题：

1 数据肯定是要遍历出来的，那数据的字段肯定是要保持统一，也就是说keyName和quotaList必须要在包含在一个数组里才能正常遍历展示，那如何合并到一起？

2 如何处理左侧的keyName只展示第一个的问题，让他们看起来整体就是一个嵌套层级的关系？

我们先做第一步：keyName和quotaList糅合到一起：

思路就是遍历quotaList手动给添加keyName：

let list=(props&&props.list)||[];

  console.log("list:",list) //原始的数据
  list.forEach(item=>{
    item?.quotaList.forEach((k,index)=>{
       list2.push({...k,keyName:index==0?item.keyName:""})
      })
  }) 
console.log("list2:",list2)  //改造以后的数据

经过改造。我们的list2实际上就成了如下数组。keyName和quotaList里的数据成功的被糅合在一起 

 这时候我们发现，渲染的效果是这样的：

 到这里我们走完了第一步。但是第二步我们怎么做呢？

这里的思想就是：数据依然采用这样的数据。我们只需要把每一行里第一行的keyName设置为正常的keyName，其他的则全部设置为空即可。我们还是从改造数据的思路上走。在糅合keyName和quotaList的时候把index==0的那个keyName设置为正常的keyName，其他的全部为“”“

 let list=(props&&props.list)||[];
  console.log("list:",list)
  list.forEach(item=>{
    item?.quotaList.forEach((k,index)=>{
       list2.push({...k,keyName:index==0?item.keyName:""}) //注意这里的判断
      })
  })

 最后我们会发现表格就成了我们想要的样子。

最开始思维进入了一个误区：打算通过css3选择器进行判断设置相应的item的opactiy：0来处理。但是发现确实不好处理。而通过改造数据，在源头上处理好逻辑以后，剩下的交给框架去渲染的确是一个正确的思路