微信小程序(wx:for)遍歷對象


最近在折騰微信小程序,遇到這么一個情況:后端返回一個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上測試通過。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM