2021-06-17 vue中解析json中的多层map

vue中解析json中的多层map

健身计划生成周期为表格中的列,后台返回是json数据格式的planingDetail,数据示例如下

{"planCycle":{	"execDate": [1,2,3],
				"execTime": "2021-05-28T07:57:45.000Z",
				"planType": 1},
 "planingRate": "1", 
 "planingValue": "10",
 "planingNumber": "1",
 "stepplaningRate": [{"key": 1623378161453,
						"max": "22",
						"min": "2", 
						"range": ["2", "3"],
						"value": "2"}],
 "stepplaningNumber": [{"key": 1623378161453,
 								 "max": "22", 
								  "min": "2",
  								 "range": [],
    				"value": ""}]
    				}

现在,想取出key为planCycle的三个map各自对应的值,
planType为0时,计划周期取execTime的值显示为每天,
planType为1,时,计划周期取execDate(数组表示计划为多天)的值显示为每周周几,
planType为2时,计划周期取execDate(数组表示计划为多天)的值显示为每月几号,

{
          label: '健身计划周期',
          minWidth: 130,
          show: true,
          vif: () => this.visible,
          //visible为Boolean值,控制该字段是否显示,
          //详情请搜v-if和v-show的区别
          formatter: (row, column, cellValue) => {
            return this.formatCycleType(row)
          }
        },

需要在methods中定义formatCycleType函数

formatCycleType(row, vue) {
      if (!row.planingDetail) {
        return null
      }
      const planingDetailDate = JSON.parse(row.planingDetail)
      if (!planingDetailDate.planCycle) {
        return null
      }
      const cycleType = planingDetailDate.planCycle.cycleType
      let cycleTypeValue = ''
      if (cycleType === 2) {
        if (!planingDetailDate.planCycle.execDate) {
          return ''
        }
        cycleTypeValue += '每月' + [planingDetailDate.planCycle.execDate]
      }
      if (cycleType === 1) {
        var newArr = planingDetailDate.planCycle.execDate.map(function(value, index) {
          return value + 1
        })
        newArr.sort((a, b) => a - b)
        cycleTypeValue = '每周' + newArr
      }
      if (cycleType === 0) {
        if (!planingDetailDate.planCycle.execTime) {
          return ''
        }
        cycleTypeValue += '按天' + this.$portal.parseTime(new Date(planingDetailDate.planCycle.execTime).getTime(), '{y}-{m}-{d}')
      }
      return cycleTypeValue
    },

上面的newArr.sort((a, b) => a - b) 可保证日期是按从小到大排序,如每周1 2 3,
效果如下