小程序动态读取js数组中数据

Question

我想知道menu中的数据怎么读取用wx:for的方式

第二层

需要第三层的代码案例，谢谢！

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，主要是为了帮助您快速解决问题，如下回答，您可以参考下，如有问题，评论区留言。

在微信小程序中，如果你有一个嵌套三层的JavaScript数组，并且想要通过wx:for循环来遍历并展示数据，可以按照以下方式实现：

假设你有如下结构的三层嵌套数组：

// 在js文件中的data对象中定义
data: {
  menu: [
    {
      title: '菜单1',
      items: [
        {
          name: '子菜单1-1',
          details: [
            { content: '详细信息1-1-1' },
            { content: '详细信息1-1-2' }
          ]
        },
        {
          name: '子菜单1-2',
          details: [
            { content: '详细信息1-2-1' },
            { content: '详细信息1-2-2' }
          ]
        }
      ]
    },
    // 更多菜单...
  ]
}

对应的WXML模板代码可能如下所示：

<!-- WXML -->
<view wx:for="{{menu}}" wx:key="outerIndex">
  <view>当前是：{{title}}</view>
  <view wx:for="{{items}}" wx:key="innerIndex">
    <view>子菜单：{{name}}</view>
    <view wx:for="{{details}}" wx:key="detailIndex">
      <view>详细信息：{{content}}</view>
    </view>
  </view>
</view>

在上述代码中：

• 第一层循环使用了默认的index作为外层菜单的下标（这里用outerIndex自定义了名称）。
• 第二层循环遍历每个菜单项下的items数组，并用innerIndex作为内层菜单项的下标。
• 第三层循环则遍历每个菜单项详情的details数组，使用detailIndex作为详情的下标。

这样就可以动态地读取和显示三层嵌套数组中的数据了。同时，在事件绑定时，可以通过event.currentTarget.dataset获取到对应的层级下标，例如点击详细信息时获取到对应的outerIndex、innerIndex和detailIndex。