微信小程式中遍歷---物件
阿新 • • 發佈:2018-12-28
最近在折騰微信小程式,遇到這麼一個情況:後端返回一個key-value的物件資料,需要遍歷物件的key-value,然後渲染到檢視中。就像下面這樣:
{
'2018-1-9':{
address: '....',
name: '....'
},
'2018-1-10':{
address: '....',
name: '....'
},
'2018-1-11':{
address: '....',
name: '....'
}
}
遇到也這種情況,有三種解決辦法:
- 讓後端改一下介面;
- 自己寫個函式,將物件變成陣列,然後再setData;
- 直接遍歷物件。
下面是第三種方法的例子:
//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上測試通過。