小程序 日期格式化

對於后台返回的數據，不一定能直接在前端使用，這個時候就需要做一些數據的處理，這次給大家介紹的是日期的處理

首先我們來看后台返回的數據格式：

list:[
        {
          date:"202003113423",
          content:"我是第五"
        },
        {
          date:"202003113423",
          content:"我是第六"
        },
        {
          date:"202003113423",
          content:"我是第三"
        },
        {
          date:"202003123423",
          content:"我是第一"
        },
        {
          date:"202003103423",
          content:"我是第二"
        }

　在這串數據里面，我們可以看到日期有些是一樣的，需求就是要將日期一樣的內容放到一起去，日期只顯示一次，即顯示為

 

 

接下來我們進行處理：

data: {
      dataList:[],//存儲處理完的數據
      list:[
        {
          date:"202003113423",
          content:"我是第五"
        },
        {
          date:"202003113423",
          content:"我是第六"
        },
        {
          date:"202003113423",
          content:"我是第三"
        },
        {
          date:"202003123423",
          content:"我是第一"
        },
        {
          date:"202003103423",
          content:"我是第二"
        }
      ]
  }

formatDate:function(reload){
    let thisList = reload ? {}:{...this.data.dataList}
    for(let i = 0;i < this.data.list.length;i++){
      let thisDate = this.data.list[i].date.substring(0,8);
      let thisYear = new Date().getFullYear()
      let year = thisYear == thisDate.substring(0,4) ? "" : thisDate.substring(0,4) + "年" //如果是當年的年份就不加“年”
      let dateFormat = year + thisDate.substring(4,6) + "月" + thisDate.substring(6,8) + "日"
      //判斷這個日期在對象里面是否已經存在，存在則在日期下面進行push，不存在就新建一個日期
      if(dateFormat in thisList){
        thisList[dateFormat].push({
          date:this.data.list[i].date,
          content:this.data.list[i].content
        })
      }else{
        thisList[dateFormat] = [
          {
            date:this.data.list[i].date,
            content:this.data.list[i].content
          }
        ]
      }
      this.setData({
        dataList:thisList
      })
      //console.log(this.data.dataList)
    }
  }

　　

處理完的數據是這樣顯示的：

//console.log(this.data.dataList)

 

 此時格式后的日期，已經是作為對象的key值，所以在html頁面循環的時候要注意

<view class="list" wx:for="{{dataList}}" wx:key="index" wx:for-index="key" wx:for-item="val">
  <view class="date">{{key}}</view>
  <view class="content" wx:for="{{val}}" wx:key="index" >
    <view class="content">{{item.content}}</view>
  </view>
</view>

　　

這樣就可以啦~~學到新知識就要整理出來，增強自己的知識領域！