微信小程序遍历二维数组

在微信小程序中遍历二维数组，代码如下

 

data 中二维数组结构如下

  data: {
    familys:[
      {
        familyName:'贾家', 
        users: [
          {name:'贾宝玉'},
          {name:'贾元春'},
          {name:'贾迎春'},
          {name:'贾探春'},
          {name:'贾惜春'}
        ]
      },
      { 
        familyName:'王家', 
        users: [
          {name:'王熙凤'},
          {name:'王夫人'},
          {name:'薛姨妈'}
        ]
      },
      {
        familyName:'薛家', 
        users: [
          {name:'薛宝钗'},
          {name:'薛蟠'},
          {name:'薛宝琴'}
       ]
      },
      {
        familyName:'史家', 
        users: [
          {name:'贾母'},
          {name:'史湘云'}
        ]
      }
    ]
  },

 

遍历代码如下

<view>
  <view wx:for="{{familys}}" wx:key="*this">
    <view>
      <text>{{item.familyName}}</text>
      <view></view>
      <text wx:for="{{item.users}}" wx:for-item="userItem" wx:key="userItem">
        <text>{{userItem.name}}</text>
        <text>,</text>
      </text>
    </view>
  </view>
</view>

核心代码在于 wx:for-item="userItem"，使用 wx:for-item 来指定遍历的对象，userItem 是随便起的变量名

 

效果如下