Vue中JS遍歷后台JAVA返回的Map數據,構造對象數組數據格式

場景

SpringBoot+Vue+Echarts實現選擇時間范圍內數據加載顯示柱狀圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121555526

 

 

上面需要后台返回Map類型的數據格式，key為時間，value為數量。

后台返回后js中怎樣遍歷Map數據。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、后台返回數據代碼

    public AjaxResult list(BusBlog busBlog)
    {
        BusBlog indexModel=new BusBlog();
        //構造返回數據，注意這里需要用LinkedHashMap
        Map<String,Integer> resultMap = new LinkedHashMap<String,Integer>();
        if(null!= busBlog.getBeginDate() && null!= busBlog.getEndDate()) {
            //獲取請求參數，開始時間和結束時間
            indexModel.setBeginDate(busBlog.getBeginDate());
            indexModel.setEndDate(busBlog.getBeginDate());
            List<String> rangeData = new ArrayList<String>();
            //查詢數據庫獲取指定時間內的數據
            rangeData = busBlogService.selectBlogCountByDate(busBlog);
            if (rangeData.size() >= 0) {
                // 日期格式化
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                try {
                    // 起始日期
                    Date d1 = sdf.parse(busBlog.getBeginDate());
                    // 結束日期
                    Date d2 = sdf.parse(busBlog.getEndDate());
                    Date tmp = d1;
                    Calendar dd = Calendar.getInstance();
                    dd.setTime(d1);
                    while (tmp.getTime() < d2.getTime()) {
                        int dayCount = 0;
                        tmp = dd.getTime();
                        //獲取查詢的數據每天的檔案數量
                        for (String oneDay:rangeData) {
                            Date oneDayDate = sdf.parse(oneDay);
                            if(oneDayDate.toString().equals(tmp.toString()))
                            {
                                dayCount++;
                            }
                        }
                        resultMap.put(sdf.format(tmp),dayCount);
                        // 天數加上1
                        dd.add(Calendar.DAY_OF_MONTH, 1);
                    }
                    System.out.println(resultMap);
                } catch (ParseException e) {
                    e.printStackTrace();
                }
            }
        }
        return AjaxResult.success(resultMap);
    }

返回數據格式

 

 

 

2、前端遍歷返回數據

    this.getList().then((response) => {
      var res = response.data;
      if (res) {
        //清空柱狀圖的數據源
        this.typeData = [];
        //遍歷后台響應數據，構造柱狀圖數據源
        for (var key in res) {
          this.typeData.push({ product: key, 博客數: res[key] });
        }
      }
      this.initChart(this.typeData);
    });