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

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

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

[
{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}})

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

总结

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

相关文章
|
5天前
|
存储 算法 C语言
二维数组程序举例
二维数组程序举例
20 2
|
6月前
|
人工智能 BI
二维数组案例
在二维数组a中选出各行最大的元素组成一个一维数组b。
39 0
|
8月前
|
JavaScript
js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)
js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)
|
10月前
|
存储 编译器 C语言
想要了解数组吗?进来看看(下)
想要了解数组吗?进来看看(下)
|
10月前
|
存储 C语言 索引
想要了解数组吗?进来看看(上)
想要了解数组吗?进来看看(上)
|
12月前
动态初始化 + 杨辉三角
动态初始化 + 杨辉三角
29 0
|
12月前
|
算法 C语言
C语言练级之路num4(有关各种菱形的打印)(用的都是基础的算法),会了这些图形的打印,从此再无你不会用的循环,给你理解的透透的
1.第一题(边框菱形的打印) 2.第二题边框 菱形的进阶 3.第三题(数字菱形的打印) 4.第四题:(空心菱形) 5.第五题(实心菱形): 6.第六题:(外带一个杨氏三角的再一次打印)
|
Java
通过五子棋案例,实现稀疏数组与二维数组直接互相转换。
通过五子棋案例,实现稀疏数组与二维数组直接互相转换。
70 0
通过五子棋案例,实现稀疏数组与二维数组直接互相转换。
C中二维数组作为参数的几种做法
C中二维数组作为参数的几种做法
75 0
|
数据格式
二维数组数据动态组合
二维数组数据动态组合