1. 程式人生 > >微信小程式中遍歷---物件

微信小程式中遍歷---物件

最近在折騰微信小程式,遇到這麼一個情況:後端返回一個key-value的物件資料,需要遍歷物件的key-value,然後渲染到檢視中。就像下面這樣:

{
  '2018-1-9':{
      address: '....',
      name: '....'
  },
  '2018-1-10':{
    address: '....',
    name: '....'
  },
  '2018-1-11':{
    address: '....',
    name: '....'
  } 
}

遇到也這種情況,有三種解決辦法:

  1. 讓後端改一下介面;
  2. 自己寫個函式,將物件變成陣列,然後再setData;
  3. 直接遍歷物件。

下面是第三種方法的例子:

//wxml
<view wx:for="{{obj}}" wx:for-index="key"  wx:for-item="value">

{{key}} : {{value.address}}

</view>
//js
data:{
    obj: {...}
}

渲染出的結果如下:

<view> 2018-1-9 : ...</view>
<view> 2018-1-10 : ...</view>
<view> 2018-1-11 : ...</view>

當wx:for遍歷物件時,wx:for-index會得到物件的key,wx:for-item會得到物件的value
微信小程式文件沒有提到遍歷物件,以上程式碼在微信開發者工具V1.02上測試通過。