小程序将二维数组为空的点子数组过滤掉方法 | 熊阿哥博客

小程序将二维数组为空的点子数组过滤掉方法

微信   2025-03-04 17:22   72   0  

以下是实现将给定字符串转换为微信小程序 JS 数组,并过滤掉 children 为空数组的父数组的代码示例:

实现思路

字符串转数组:使用 JSON.parse() 方法将字符串转换为 JavaScript 数组。

过滤数组:使用数组的 filter() 方法过滤掉 children 为空数组的元素。


代码示例

1. 创建页面结构(index.wxml)

<view>
  <!-- 遍历过滤后的数组并显示每个元素的 workid 和 id -->
  <view wx:for="{{filteredArray}}" wx:key="id">
    <text>workid: {{item.workid}}, id: {{item.id}}</text>
    <!-- 遍历子元素并显示其 Title -->
    <view wx:for="{{item.children}}" wx:key="id">
      <text>  - Title: {{item.Title}}</text>
    </view>
  </view>
</view>


2. 编写逻辑代码(index.js)

Page({
  data: {
    // 用于存储过滤后的数组
    filteredArray: []
  },
  onLoad() {
    // 给定的字符串
    const str = '[{"workid":902,"id":3,"children":[]},{"workid":4,"id":4,"children":[{"id":4,"Title":"优选控股办公室综合体","simg":"/UploadFile/20224/202204271447380416.jpg","ComID":937,"Vminute":1,"Vsecond":45}]}]';
    // 将字符串转换为数组
    const arr = JSON.parse(str);
    // 过滤掉 children 为空数组的元素
    const filtered = arr.filter(item => item.children.length > 0);
    // 更新页面数据
    this.setData({
      filteredArray: filtered    });
  }});

  

代码解释

index.wxml:

使用 wx:for 指令遍历 filteredArray 数组,并显示每个元素的 workid 和 id。

对于每个元素的 children 数组,再次使用 wx:for 指令遍历并显示每个子元素的 Title。


index.js:

在 onLoad 生命周期函数中,首先定义了给定的字符串 str。

使用 JSON.parse() 方法将字符串转换为 JavaScript 数组 arr。

使用数组的 filter() 方法过滤掉 children 为空数组的元素,得到过滤后的数组 filtered。

使用 setData() 方法将过滤后的数组更新到页面数据中。


博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。