小程序中实现二维数组的展示

简介: 小程序中实现二维数组的展示

我们在小程序中有一类需求就是要显示二维数组,二维数组是指数组中的元素也是数组,比如我们以菜谱为例,菜谱有名称和用料,用料就又是一个数组,如果我们构造数据可以是这样

[
{name:'凉拌茄子',mix:['茄子','蒜末','小米椒','葱花']},
{name:'清炒丝瓜',mix:['丝瓜','盐','糖']}
]

定义好数据后,我们看一下低代码工具中是如何展示二维数组的

1 定义变量

我们如果要展示数据,首先要把数据存放到变量中,打开我们的控制台,创建一个空白的应用

类型选择Web端(H5/PC)

然后在应用编辑器的代码区,创建一个自定义变量

我们的变量类型选择数组,然后数据模型选择JSON,将变量名修改为menu,将我们构造好的数据粘贴到默认值里

2 外层循环

我们展示二维数组需要用到循环的嵌套,首先拖入一个循环展示组件

点击右侧循环数据的fx,我们绑定为我们创建的menu变量

文本组件自动识别到了name属性

3 内层循环

外层循环我们展示了菜谱的名称,内层循环展示一下用料,在文本组件下再放置一个循环展示组件

这个时候我们就要从外层循环的元素里找到我们的mix属性绑定到内层循环里

循环展示组件要求绑定的对象的类型为[{}]结果,数组的元素要是对象,因此我们使用数组的map方法重新包装一下

$w.item_repeater1.mix.map(item=>{return{name:item}})

为了让用料和我们的菜谱名称有一定的层级,给内层循环的文本组件设置一定的内边距

总结

二维数组展示的时候,主要是要用循环嵌套来实现,低码工具里的循环是使用组件完成的,要注意组件的层次,还有就是内层循环的时候要做一定的数据加工,只要处理好二维数组展示也比较简单,学会了照着示例练习一下吧。

相关文章
|
9月前
|
存储 算法 C语言
二维数组程序举例
二维数组程序举例
100 2
|
4月前
|
存储
如何使用指针数组来实现动态二维数组
指针数组可以用来实现动态二维数组。首先,定义一个指向指针的指针变量,并使用 `malloc` 为它分配内存,然后为每个子数组分配内存。通过这种方式,可以灵活地创建和管理不同大小的二维数组。
|
6月前
|
IDE Go 开发工具
spew - 更直观地打印变量
spew - 更直观地打印变量
59 0
|
8月前
|
Linux Windows
|
8月前
|
C语言
杨辉三角(代码直接呈现,便于理解)
杨辉三角(代码直接呈现,便于理解)
84 0
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
49 0
|
9月前
|
Java 数据库 开发者
Java数组件与表格组件
Java数组件与表格组件
72 0
|
人工智能 BI
二维数组案例
在二维数组a中选出各行最大的元素组成一个一维数组b。
76 0
|
JavaScript
js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)
js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序1
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序1
54 0