微信小程序(wx:for)遍历对象
最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中。就像下面这样:
{
'2018-1-9':{
address: '....',
name: '....'
},
'2018-1-10':{
address: '....',
name: '....'
},
'2018-1-11':{
address: '....',
name: '....'
}
}
遇到也这种情况,有三种解决办法:
- 让后端改一下接口;
- 自己写个函数,将对象变成数组,然后再setData;
- 直接遍历对象。
下面是第三种方法的例子:
//wxml
<view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value">
{{key}} : {{value.address}}
</view>
//js
data:{
obj: {...}
}
渲染出的结果如下:
<view> 2018-1-9 : ...</view>
<view> 2018-1-10 : ...</view>
<view> 2018-1-11 : ...</view>
当wx:for遍历对象时,wx:for-index会得到对象的key,wx:for-item会得到对象的value
微信小程序文档没有提到遍历对象,以上代码在微信开发者工具V1.02上测试通过。
微信小程序(wx:for)遍历对象的更多相关文章
- 微信小程序wx.request接口
微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...
- 监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
- 微信小程序wx.showActionSheet调用客服信息功能
微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...
- 微信小程序wx:for隐藏遍历的最后一个元素
微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最 ...
- 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- 微信小程序wx.navigateTo层叠5次限制,特殊情况的建议
小程序页面的实例使用栈的数据结构存储,栈内元素最多5个(换一种方式说,就是用户最多能点击5次返回),微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法. 小程序三种页面跳转API 的区 ...
- 坑:微信小程序wx.request和wx.uploadFile中传参数的区别
微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通 ...
- 微信小程序 wx.request
onLoad: function () { var that = this console.log('https://free-api.heweather.com/s6/weather?locatio ...
- 微信小程序wx:key以及wx:key=" *this"详解:
今天写微信小程序无意中看到控制台给出了这样一行提示: 求解百度才知道,给大家分享一下: 1.wx:for定义 官方文档:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲 ...
- 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the ...
随机推荐
- python 基础_ 数组的 增删改查3
数组是运用在多个数据存在一个变量中的,而在调用的时候可以调用所需要的数组. 创建数组 a = ['a','b','c','d','f'] #创建一个数组a其中有5个元素分别是abcdf 1.查询.所谓 ...
- ActiveMQ实战之 Queue点对点消息
前言:ActiveMQ消息模式点对点编码 运行:先运行消费者在开启消息生产者即可接收到消息 消息生产者 /** * @摘要 测试发送单条数据的类 */ public class ZMQOneSendT ...
- Linux学习(1)- TCP/IP网络协议基础
Linux学习(1)- TCP/IP网络协议基础 一.TCP/IP 简介 学习内容 TCP/IP(Transmission Control Protocol/Internet Protocol)是传输 ...
- Alpha阶段敏捷冲刺(二)
1.提供当天站立式会议照片一张. 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 祁泽文:上网了解了艾宾浩斯遗忘曲线算法. 徐璐琳:找交互模块的源 ...
- 二分搜素——(lower_bound and upper_bound)
因为每个人二分的风格不同,所以在学习二分的时候总是被他们的风格搞晕.有的人二分风格是左闭右开也就是[L,R),有的人是左开右闭的(L,R]. 二分的最基本条件是,二分的序列需要有单调性. 下面介绍的时 ...
- openresty + lua 3、openresty http 调用
http 的话,openresty 已经集成,ng 的话,自己引入即可. github 地址:https://github.com/pintsized/lua-resty-http github 里提 ...
- hdu 5094 状压bfs+深坑
http://acm.hdu.edu.cn/showproblem.php?pid=5094 给出n*m矩阵 给出k个障碍,两坐标之间存在墙或门,门最多10种,状压可搞 给出s个钥匙位置及编号,相应的 ...
- python_运算符与表达式
运算符与表达式 python运算符 运算符 功能说明 + 算术加法,列表.元组.字符串合并与连接,正号 - 算术减法,集合差集,相反数 * 算术乘法,序列重复 / 真除法 // 求整商,但如果操作数中 ...
- Gimp RGB 转 CMYK
安装GIMP separate+插件.在Windows的Photoshop中,有转换CMYK的功能,非常简单.在Linux里,通常用GIMP进行转换.由于授权的问题,默认安装的GIMP里没有安装转换的 ...
- 【VB.NET】利用纯真IP数据库查询IP地址及信息
几年前从某个博客抄来的,已经忘记原地址了,如果需要C#版的,可以在博客园搜到吧.我因为自己用,所以转换为了VBNET代码,而且也放置了很久,今天无意间翻出来,就分享给大家吧. 首先,先下载 纯真数据库 ...