微信小程序遍历二维数组

最新推荐文章于 2024-05-09 14:01:17 发布

原创最新推荐文章于 2024-05-09 14:01:17 发布 · 7.8k 阅读

19 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在微信小程序中遍历复杂的二维数组结构，通过示例代码展示如何使用wx:for和wx:for-item属性有效地遍历并显示数组中的每一个元素。

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

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

效果如下