微信小程序遍历二维数组

淡淡的烟草味﹌ 2022-12-01 03:56 448阅读 0赞

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

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 是随便起的变量名

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20221123/b9d0445de21848f396cd77cf8b0eda50.png