最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中。就像下面这样:

{
'2018-1-9':{
address: '....',
name: '....'
},
'2018-1-10':{
address: '....',
name: '....'
},
'2018-1-11':{
address: '....',
name: '....'
}
}

遇到也这种情况,有三种解决办法:

  1. 让后端改一下接口;
  2. 自己写个函数,将对象变成数组,然后再setData;
  3. 直接遍历对象。

下面是第三种方法的例子:

//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)遍历对象的更多相关文章

  1. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  2. 监控微信小程序wx.request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  3. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  4. 微信小程序wx:for隐藏遍历的最后一个元素

    微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最 ...

  5. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  6. 微信小程序wx.navigateTo层叠5次限制,特殊情况的建议

    小程序页面的实例使用栈的数据结构存储,栈内元素最多5个(换一种方式说,就是用户最多能点击5次返回),微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法. 小程序三种页面跳转API 的区 ...

  7. 坑:微信小程序wx.request和wx.uploadFile中传参数的区别

    微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通 ...

  8. 微信小程序 wx.request

    onLoad: function () { var that = this console.log('https://free-api.heweather.com/s6/weather?locatio ...

  9. 微信小程序wx:key以及wx:key=" *this"详解:

    今天写微信小程序无意中看到控制台给出了这样一行提示: 求解百度才知道,给大家分享一下: 1.wx:for定义 官方文档:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲 ...

  10. 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

    微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the ...

随机推荐

  1. 笔记 Bioinformatics Algorithms Chapter2

    Chapter2 WHICH DNA PATTERNS PLAY THE ROLE OF MOLECULAR CLOCKS 寻找模序 一. 转录因子会结合基因上游的特定序列,调控基因的转录表达,但是在 ...

  2. C#-VS支持的语言

    其中C语言选C++

  3. 运行Xcode时,提示:An error was encountered while running (Domain = FBSOpenApplicationErrorDomain, Code = 4)

    运行Xcode模拟器时,提示: An error was encountered while running (Domain = FBSOpenApplicationErrorDomain, Code ...

  4. hadoop和spark相关参数的配置

    背景 MapReduce和Spark对外提供了上百个配置参数,用户可以为作业定制这些参数以更快,更稳定的运行应用程序.本文梳理了最常用的一些MapReduce和Spark配置参数. MapReduce ...

  5. NoSQL世界的几个重要理论

    和所有事物一样,NoSQL的兴起也是由许多理论支撑作为前提的,正是由下面一些理论的支撑,NoSQL的方向才能如此明朗. 1.CAP理论 CAP理论无疑是导致技术趋势由关系数据库系统向NoSQL系统转变 ...

  6. hdu 4930 斗地主恶心模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=4930 就是两个人玩斗地主,有8种牌型,单张,一对,三张,三带一,三带对,四带二,四炸,王炸.问先手能否一次出完牌 ...

  7. nodes 验证码

    一个常见的需求. 知乎上得讨论:http://www.zhihu.com/question/32156977 node-canvas 在mac上安装有问题,可能是我没有sudo 使用了ccap:挺不错 ...

  8. vsm安装

    一. 部署环境介绍 软件需求 1) CentOS 6.5 64bit 2) Ceph 0.80.6 网络拓扑介绍 1) Controller Node 由Console节点组成,安装VSM控制平台 2 ...

  9. [Proposal]Tank Battle——Infinite

    Tank Battle——Infinite 把经典的坦克大战扩展到一个“无限”大的2D地图上.支持“全世界”的玩家同时在线玩. 游戏模式当然要做成全新的.增加玩家之间的交互,但又不较强的依赖于实时的通 ...

  10. [Proposal]Transform ur shapes!

    [Name] Transform ur shapes [Motivation]市场上有很多涂鸦游戏,例如火柴人涂鸦,非常有趣 我们可以结合所学,将一些图形变形的操作融入进去,做一个我们自己的有趣的游戏 ...