【干货#009】小程序如何格式化显示对象数组属性

最新推荐文章于 2023-09-14 19:25:49 发布
最新推荐文章于 2023-09-14 19:25:49 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 小程序前端 文章标签： ui 小程序 微信 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingciong/article/details/78539049
版权

缘起

小程序页面中经常要显示后台数据库返回的对象数组，当对象属性可以显示时，直接使用setData进行赋值即可，但当对象属性需要格式化显示时，就需要进行格式化处理。



方案一：数组map映射

首先定义格式化函数formatTime，然后将数组对象的属性进行格式化处理后再映射到数组上。



方案二：WXS脚本语言

使用小程序最新WXS语言，定义一个WXS格式化函数formatTime，然后直接在页面中对属性进行格式化处理。



结果

显示结果如图所示，两种方案的效果一样。但我推荐第二种使用WXS的方案，逻辑上更清晰，以后修改时也更方便。



注意：两种方案由于脚本的执行环境不一样，两种方案的格式化处理函数的处理方式是有点差别的。


更多实战干货，可查看：

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

小程序使用有赞ZanUI


更多常见错误，可查看：

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误


关注晓程序干货店，分享小程序开发干货知识



mingciong
关注
专栏目录
小程序wxml中时间格式化
05-18
小程序里面直接在页面渲染文件wxml里进行格式化。在wxml做计算可参考
js 对数组对象中的属性进行格式化formater
dupha的博客
03-10 966
封装数组对象，并格式化，取值格式化后数据信息
数组扁平化和对象格式化
窄门狭路的博客
08-18 362
JS中，实现数组扁平化最简单的就是flat()方法，如[1,2,3, [1,2,3, [1,2,3]]].flat(2)即可，2代表的是深度是两层。数组扁平化（普通递归）对象格式化（看看即可）数组扁平化（尾递归）
js日期格式化 小程序 ios Date对象(好坑(:)
weixin_42448623的博客
03-18 399
/** 获取指定日期的前n天 * date 当前日期 * day 前 或者 后 的日期 单位/天 * format 格式 */ export function getNextDate(date, day=-1, format="yyyy-MM-dd") { 　　return new Date(new Date(date).getTime() + day*24*60*60*1000).format(format);; }; // 日期格式化 Date.prototype.format = fun
微信小程序传递的数组php,微信小程序页面间传递数组对象方法解析
weixin_39939993的博客
03-11 836
微信小程序页面间传递数组对象方法解析这篇文章主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下方法1：A页面跳转链接添加参数，B页面onLoad 接收方法2：设置全局变量 globalData，用的少，一般适用于全局共享的一份信息，如用户open_id等// A页面// 数组、对象都需要stringify...
总结：数组，集合(list,Map)。。。。。《干货》持续更新。。。。。
DrewWong的博客
10-12 335
1.1什么是数组【理解】 ​ 数组就是存储数据长度固定的容器，存储多个数据的数据类型要一致。 1.2数组定义格式【记忆】 1.2.1第一种 ​ 数据类型[] 数组名 ​ 示例： int[] arr; double[] arr; char[] arr; 1.2.2第二种 ​ 数据类型 数组名[] ​ 示例： int arr[]; double arr[]; char arr[]; 1.3.1什么是动态初始化 ​ 数组动态初始化就是只给定数组的长度，由系统给出默认初始化值。 1.
java小白入门笔记（干货满满）
JingYuanhao的博客
09-27 536
目录 一、命名规范 二、数据类型 1.基本数据类型 2.引用数据类型 3.定义变量 4.java支持的变量类型 5.转义序列 6.堆和栈 7.数据类型转换 三、运算符 1.算术运算符 2.比较运算符 3.逻辑运算符 四、三目运算 三目运算与if的区别 五、条件判断 1.if else 2.Switch 3.if（）else if 判断 六、循环 1.for循环 2.while循环 3.do while循环 4.死循环 5.break、continue、ret
前端小白入门笔记（干货满满）
JingYuanhao的博客
09-28 404
目录 一、HTML 二、基础语法 三、SEO优化 四、特殊符号 五、列表标签 1.概念： 2.有序列表： 3.无序列表： 4.自定义列表： 5.表格标签 ： 6.表单标签： 六、前端（前台）、后端（后台）的划分 七、HTTP状态码 八、CSS 1.概述： 2.作用： 3.div和span: 4.css与html的三种结合方式 5.基础选择器 九、JS 1.概述 2.js的组成 3.特点： 4.js基础语法 5.js中的数据类型 6.定...
ECharts数据可视化：入门、实战与进阶干货分享（GitHub 44.5k）
qq_15041931的博客
01-12 5210
前言 最近接到一个新的任务，说是在公司内部要组织开展技术交流分享会，为了促进程序同事间的技术氛围，提高大家的学习积极性，让更多的人能参与进来，已纳入部门和个人绩效考核范畴。 形式很简单，每周都会进行一次技术分享。分享人由入职时间先后顺序安排。题材不限，可以是自己熟悉的技术领域或某个知识点，比如区块链开发者分享底层公链、联盟链、智能合约等等；服务端开发者分享框架与设计模式，SQL深度优化，消息队列等等，前端开发者分享MVVM模式，WEB前端性能优化，数据可视化，CSS3高级用法等等。 可以是一些通用的技术，比
C++ 面向对象程序设计复习大纲
linuxguitu的博客
11-02 536
**1.叙述面向对象编程的特点是什么？(提示：封装、继承、多态。)** 对比面向过程具有抽象、封装、继承和多态的特点。 封装是将抽象得到的数据和行为相结合，形成了一个有机整体，使得一部分成员充当类与外部的接口，而将其他成员隐藏了起来达到了对成员访问权限的合理控制，使得不同类之间的影响最小，加强数据安全，简化编程。 继承允许在保持原有类特性的基础上，进行更具体、更详细的说明，能够很好反映出特殊概念和一般概念之间的关系，是代码复用的基础机制。 多态使得一段程序能够具有处理多种类型对象的能力，相同的消息在
微信小程序 picker 对象数组 如何展示
sam的博客
11-11 3356
JS data: { Data: [ {id:0,name:'北京' }, {id:1,name:'上海' }, {id:2,name:'深圳' } ], index: 0 }, bindChange: function(e) { console.log('当前选中的数值下标为', e.detail.value) this.setD...
小程序云开发，包含对象数组字段的多字段模糊查询
fengjixucui_mzy的博客
03-16 2316
代码： //模糊查询 Search:function(){ wx.cloud.init({ env:'forum-test-qp1al' }) let that=this const db = wx.cloud.database() //初始化数据库 const _= db.command //db.command内含多种方法构建复杂的...
微信小程序开发中的数据清洗和处理
最新发布
吃不胖.
09-14 273
本文将着重介绍微信小程序开发中的数据清洗和处理相关内容，包括数据格式化、数据筛选、数据分类、数据分析等方面，力求为大家提供实用的案例和解决方案。在小程序开发中，我们经常需要将一些原始数据进行格式化，使其满足我们的需求。假设我们有一个商品列表，每个商品包含名称、价格、图片、地区等信息，我们需要根据地区将商品进行分类。假设我们有一个商品列表，每个商品包含名称、价格、图片、品牌等信息，我们需要根据品牌将商品进行分类。在小程序中，我们经常需要根据某些条件将数据进行分类，比如根据地区、品牌、价格等将商品分类。
获取数组中的每个对象中的某个属性的值
热门推荐
逆风优雅的博客
10-21 1万+
<script> // 假设初始数据 let arr = [ { id: 1, name: '李磊', }, { id: 2, name: '韩梅梅', }, { id: 3, name: '丽丽', }, { id: 4, name: '刘子', } ] 方法一： // 肯定要先遍历数组 , 用map 方法，把你想要的属性...
js对象数组根据某一属性查找对象
az44yao的专栏
06-10 9856
js对象数组[{name: "zhangsan", age: 20}, {name: "lisi", age: 30}], 如果想查找name是zhangsan的这个对象，传统方法可以根据for+if条件遍历，也可以用map重新构造，或者组装新对象。 1. 组装新对象 list.forEach(function (item) { selectObj[item.name] = item }) selectObj新对象结构为：{"zhangsan": {name: "zhangsan", ag...
微信小程序，格式化千分位并保留两位小数
笔记
03-11 4717
1、新建utils.wxs //逢三位转逗号,保留两位小数 var threeNumForTwo = { money_three_for_two_thousands: function(num) { var num = num.toString(); var len = num.length; var index = num.indexOf('.'); if...
微信小程序实现日期格式化
花花世界的博客
03-10 5791
1、获取时间戳格式的系统日期 //获取系统时间 var nowtime = new Date().getTime() console.log('现在的时间是'+nowtime) 输出： 现在的时间是1615360040098 2、将时间戳格式的日期转换成yyyy-MM-dd HH:MM:SS /** * * @param {*} times 时间戳 * 转换为 yyyy-MM-dd HH:MM:SS 格式的日期 */
微信小程序-使用对象格式数据进行遍历的坑(对象格式的赋值及遍历顺序)
weixin_44622984的博客
06-23 1653
需求背景 项目需要做一个类似于及时聊天的留言板功能(其实除了不能实时刷新消息,其它也没差别了), 需要按照时间顺序,将最新的消息展示在最下面,下拉则加载更多历史消息 正文 因为前期未充分考虑到数据结构问题,后台给我的数据格式如下 data = { 2020-06-10 : [ {id:1,message:'xxxxxxxx'},{id:2,message:'xxxxxxxx'},{id:3,message:'xxxxxxxx'} ], 2020-6-12 : [ {id:4,message:'xx
小程序格式化
xiyangyang8110的博客
08-07 2306
Alt+shift+F
微信小程序弹窗组件封装实践教程
`flag`属性用于控制组件是否显示，`title`、`content`、`btn_no`和`btn_ok`是通过props传入组件内部的参数。 3. 在`popup.wxss`中，设置了组件的样式，如全屏覆盖的半透明黑色背景和绝对定位的弹出容器布局。 4. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值