后台数据修改案例

喵了个咪

后台数据现在给的我很迷 虽然不难 但是就感觉挺恶心的 一个列表 js循环2次 页面循环3次 尴尬尴尬 '_>'
希望后台爸爸以后能把数据排序好给我

const data = [
    {
      "201808": [
        {
          "tradeId": 25568905657346541,
          "accountNo": "1031177154160889856",
          "amount": 0.01,
          "accountType": 2,
          "busType": 1,
          "createTime": "2018-08-20 20:36:05",
          "billName": "充值-个人"
        },
        {
          "tradeId": 25568905657346150,
          "accountNo": "1031177154160889856",
          "amount": 84,
          "accountType": 2,
          "busType": 1,
          "createTime": "2018-08-20 00:33:04",
          "billName": "充值-个人"
        }
      ]
        },
        {
          "201807": [
            {
              "tradeId": 25568905657346221,
              "accountNo": "1031177154160889856",
              "amount": 14,
              "accountType": 2,
              "busType": 1,
              "createTime": "2018-07-20 00:39:08",
              "billName": "充值-个人"
            }
      ]
        },
        {
          "201806": []
        },
        {
          "201805": []
        }
    ]

由于小程序不支持模板里写函数return 处理的数据 所以需要修改原数据来渲染页面
这里用的到201806 需要改成2018年06月
上面的数据是根据时间排序的 之前给我的是05 06 07 08的顺序.. 之后改成倒叙以后 对象是无序的 所以后台给我的数据用数组包裹好对象以后就是排序好的.....orz (不懂java 我感觉有更好的方法去做)
js是原生写法

//新数组
var arrList = []
//循环数组提取每一个对象
for(var obj of data){
    //for in 提取对象的key
    for(var key in obj){
        //查找对象自身的key 不往原型链上查找
        if(obj.hasOwnProperty(key)){
        //defineProperty方法参考上篇文章
          arrList.push( Object.defineProperty(obj,time(key),Object.getOwnPropertyDescriptor(obj,key)))
        }
        //删除旧的key
        delete obj[key]
    }
}

//修改月份
function time(timestamp){
  return timestamp.substr(0,4)+'年'+timestamp.substr(5,6)+'月'
}

---

至此 算是完成了年月的修改 之后在模板中需要循环3次.. 以下例子是小程序的循环

<block wx:for="{{arrList}}" wx:key="{{index}}">
      <view class="bill-box" wx:for="{{item}}" wx:for-index="key" wx:key="{{index}}">
        <view class="bill-month">
          {{key}}
        </view>
        <view class="bill-list">
          <!-- 循环开始 -->
          <block wx:for="{{item}}" wx:key="{{index}}" >
            <view class="bill-detail">
              <view class="detail-left">   
                <view class="img-box">
                  <!--无关紧要-->
                  <image class="detail-img" src="../assert/img/logo.png" wx:if="{{item.busType==2}}"/>
                  <image class="detail-img" src="../assert/img/pay.png" wx:if="{{item.billName==='充值-个人'}}"/>
                  <image class="detail-img" src="../assert/img/firm.png" wx:if="{{item.billName==='充值-企业餐补'}}"/>
                </view> 
                <view class="content-box">  
                  <view class="content-title">{{item.billName}}</view>
                  <text class="content-time">{{item.createTime}}</text> 
                </view>    
              </view>     
              <view class="detail-right {{item.busType==1?'recharge':''}}">
                <text class="gang" wx:if="{{item.busType==2}}">-</text>
                <text class="jia" wx:if="{{item.busType==1}}">+</text>
                {{item.amount}} 
              </view>
            </view>          
          </block>    
          <!-- 循环结束 -->
        </view>
      </view> 
    </block>