前端开发中,后端返回的数据需要二次整合回显表格的方法

如题
有时候后端返回的json需要前端整合为自己想要的格式
效果图如下:根据时间将不同站点的数值放在表格中,站点名数量不定(这里以4个为例),所以需要动态回显
前端开发中,后端返回的数据需要二次整合回显表格的方法_第1张图片
后端返回的数据如下:
前端开发中,后端返回的数据需要二次整合回显表格的方法_第2张图片
在这里插入图片描述
这里后端是一个站一个站依次返回的数据,所以这里我们需要根据时间把对应不同的站点整合成一个新数组,这里我的解决思路是利用map集合去解决。
代码如下
注意:
1.analysisListData是后端返回的元素数据
2.stationNames是站点名的数组

  // *分解接口返回的数据 用于 table
  decomposeData() {
    try {
      this.tableData = [];
      let newDataList: string[] = [];
      //根据日期分解去重 把日期放入新数组中
      newDataList = this.analysisListData.map(item => {
        return item.time!;
      });

      newDataList = sortBy(uniq(newDataList), s => dayjs(s).valueOf());

      const arr: any[] = [];
      let obj: any = {};
      //根据站点名的下标取名map集合的key值(map1,map2...)并放入arr数组中
      this.stationNames.forEach((item: string, index: number) => {
        let mapName: string;
        mapName = 'map' + (index + 1);
        obj[mapName] = new Map();
        arr.push(obj[mapName]);
      });
      //把后端返回的数据按照map的形式存储 , key:TT时间 , value为对应的值
      this.stationNames.forEach((id: string, index: number) => {
        this.analysisListData.forEach(filterItem => {
          if (filterItem.stationName === id) {
            // 确定是该站点的值 就赋值,否则留空
            arr[index].set(filterItem.time!, filterItem.value);
          }
        });
      });
      newDataList.forEach((item: string, index: number) => {
        let obj: any = {};
        this.stationIds.forEach((stationIdsItem: any, i: number) => {
          obj.time = item.substring(0, 16);
          let a = arr[i].get(item);
          //这里需要对0判断 因为0在if中会隐式转换为false
          if (a == 0) {
            a = '0';
          }
          obj[i + 1] = a ? a : '-';
        });
        this.tableData.push(obj);
      });
    } catch (error) {
      console.error(error);
      showMessage('无法获得表格数据', 'warning');
    }
  }

返回后的效果入选,数据也都一一对应;
前端开发中,后端返回的数据需要二次整合回显表格的方法_第3张图片

你可能感兴趣的:(前端,javascript,vue.js)