记录前端数据处理

最近写的项目都需要前端处理数据，我才知道自己数据结构重组能力有多差

1、案例一：我写了一个小程序答题功能

后端给我返回的数据结构是这样的

	"data": [{
		"answer": ["绿色", "在国外; 到国外", " 空白处，空格;遗忘; 空弹;", "演员;"],
		"freq": 2,
		"type": "en2cn",
		"word": "green"
	}, {
		"answer": ["花; 花朵; 开花植物; (已摘) 带梗的花;", "买得起; (有时间) 做，能做; 承担得起(后果); ", "(鼓的) 一击; (翅的) 一振; (心脏等的) 跳动; 击鼓声; ", "(使) 上岸; 把…拖上岸;"],
		"freq": 2,
		"type": "en2cn",
		"word": "flower"
	}]

answer是答案，Word是题目，type是题目类型

后台默认正确答案是answer数组中的第一项

然后，后台让我打乱顺序。所以我遇到了问题：

问题一：我应该怎么记录下正确答案，

问题二：当我打乱顺序的时候，我怎么找到正确答案

记录正确答案的代码如下

  res.data.data.forEach(item => {
              item.isAnswer = item.answer[0] //把正确答案记录下来
              let arr = item.answer
              let len = arr.length
              let newArr = [] //用来存放打乱后的数组
              for (var i = 0; i < len; i++) {
                let index = Math.floor(Math.random() * arr.length) //随机打乱
                newArr.push(arr[index])
                if (arr[index] === item.isAnswer) {
                  item.isAnswerIndex = i //记录下被打乱后正确答案的下标
                }
                arr.splice(index, 1)
              }
              item.answer = newArr
            })
            this.questionList = res.data.data

此时，新返回的数据是这样的

[{
answer: ["演员;", "绿色","在国外; 到国外", " 空白处，空格;遗忘; 空弹;"],
length: 4,
freq: 2,
isAnswer: "绿色",
isAnswerIndex: 1,
type: "en2cn",
word: "green"}]

isAnswerIndex就是正确答案的索引，此时只需要绑定个点击事件，把点击的索引和正确答案对比相不相等，相等就是正确答案

点击事件和结构如下

    handleAnswerClick (item, index, word) {
        let quetionLength = (this.questionList.length - 1)
        let percent = Math.ceil((1 / (this.questionList.length)) * 100)
        this.percentValue += percent
        this.activeIndex = index
     
        if (index === item) {
          console.log('正确')
        } else {
          console.log('错误')
        }
      },





template部分


<ul class="sv-question-answer">
           <li v-for="(item,index) in question.answer" @click="handleAnswerClick(question.isAnswerIndex,index,question.word)" :ref="index">{{item}}</li>
         </ul>

效果图

2、案例二

我要渲染echarts类似下图的效果

 

但是 后台给我返回的数据结构如下

然后我数据重构了一下

代码如下

 let data0 = res.data[0].workplaceItemWorkVOS
              let ser = []
              data0.forEach(lengendItem => {
                let obj = {
                  name: lengendItem.name,
                  stack: lengendItem.name,
                  type: 'bar',
                  barMaxWidth: 50,
                  data: []
                }
                ser.push(obj)
                legend.push(lengendItem.name) //lengend
              })
              this.echartsOption.legend = legend
              res.data.forEach(item1 => {
                xArry.push(item1.date)
                item1.workplaceItemWorkVOS.forEach((list, index) => {
                  ser[index].data.push(list.workers) //其实只要理解这步就好了
                })
              })
              this.echartsOption.series = ser
              this.echartsOption.xData = xArry

项目没启动就不放效果图了