微信小程序遍历二维数组

淡淡的烟草味﹌ 2022-12-01 03:56 504阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，504人围观）

还没有评论，来说两句吧...

相关阅读

相关 java二维数组遍历

![627ecaa6fd0549f483dbe53ec88ba84e.jpeg][] 在 java中，二维数组是指在二维平面上的一个数组。在二维数组中，数据都是按行排序的。我

小咪咪/ 2023年09月30日 23:46/ 0 赞/ 53 阅读

相关微信小程序生成二维码

微信小程序-二维码生成器 > 本项目用于在微信小程序中生成二维码，也可用于第三方框架Mpvue,Taro等。生成预览 [![jsh5css.cn][]][jsh

我会带着你远行/ 2023年08月17日 15:54/ 0 赞/ 234 阅读

相关微信小程序生成二维码

今天写代码有个需求，需要将已有的数据转换成二维码。大概搜到有两个写法的版本，也不详细介绍他们是怎么写的了。我照着他们的写法，搞了好几个小时，也不知道为啥，就是不出。

男娘i/ 2023年07月18日 09:40/ 0 赞/ 42 阅读

相关微信生成小程序二维码

已经更新版本，下面是不保存本地直接将微信返@\[TOC\](微信生成小程序二维码更新喽) 样例博客链接： https://blog.csdn.net/weixin\_3

爱被打了一巴掌/ 2023年07月04日 12:48/ 0 赞/ 27 阅读

相关微信小程序二维数组分组

// data二维数组 // name 按该字段的值分组 fenzu(data,name){ let that = this

绝地灬酷狼/ 2022年12月07日 01:23/ 0 赞/ 227 阅读

相关微信小程序遍历二维数组

在微信小程序中遍历二维数组，代码如下 data 中二维数组结构如下 data: { familys:[ {

淡淡的烟草味﹌/ 2022年12月01日 03:56/ 0 赞/ 505 阅读

相关微信小程序系列——js遍历数组，微信小程序数组的遍历，forEach

json数据返回的数组形式的，怎么遍历 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

深藏阁楼爱情的钟/ 2022年02月25日 11:09/ 0 赞/ 2311 阅读

相关数组、二维数组定义、遍历

数组定义数据类型\[\] 数组名 = new 数据类型\[元素个数或数组长度\]; int \[ \] x = new int \[100\] ![16399

布满荆棘的人生/ 2021年12月20日 15:49/ 0 赞/ 421 阅读

相关数组、二维数组定义、遍历

数组定义数据类型\[\] 数组名 = new 数据类型\[元素个数或数组长度\]; int \[ \] x = new int \[100\] ![16399

旧城等待，/ 2021年12月20日 15:27/ 0 赞/ 413 阅读

相关微信小程序（wx:for）遍历对象

最近在折腾微信小程序，遇到这么一个情况:后端返回一个key-value的对象数据，需要遍历对象的key-value，然后渲染到视图中。就像下面这样: data: {

素颜马尾好姑娘i/ 2021年11月26日 13:48/ 0 赞/ 432 阅读