最近在折腾微信小程序,遇到这么一个情况:后端返回一个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. js短信验证码

    短信验证码,无注释,url顺便写的错的,所以会报错 <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  2. 20155205 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    20155205 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤一:打开mac下的 ...

  3. Silverlight4.0正式版(Silverlight4_Tools)离线安装

    1.从微软的网站下载Silverlight4_Tools.exe(或者http://download.csdn.net/detail/taomanman/4522848)2.执行Silverlight ...

  4. sublime text2一些使用技巧+插件

    一.前言 作为一个前端,有一款好的开发利器是必不可少的,editplus.notepad++都是不错的工具,体积轻巧,启动迅速(dw太浮肿了).最近,又有一款新的编辑器诞生,席卷前端界,惹得无数喜爱, ...

  5. day34(注解)

    注解 注解和注释的区别: 注释:是给程序员看的. 注解:是给虚拟机识别的. 注解的作用: 1.代替配置文件 2.标识一个方法,代替一个特殊功能. JDK当中的提供的注解: 标识重写方法 @Overri ...

  6. Linux 禁ping和开启ping操作

    方法一:     # echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all 如果要恢复,只要: # echo 0 > /proc/sys/net ...

  7. noip第22课作业

    1.   数字分解 [问题描述] 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和,当n等于5时有6种拆分方法: 5=1+1+1+1+1 5=1+1+1+2 5=1+1+3 5=1+2+ ...

  8. Scala深入浅出实战经典:29,Case class和Case object代码实战解析

    今天学习了王家林老师scala讲座的第29讲,case class和case object的应用实战.做下记录. 信息来源于 DT大数据梦工厂微信公众账号:DT_Spark 关注微信账号,获取更多关于 ...

  9. [kuangbin]树链剖分A - Aragorn's Story

    比较水的题了,比模板题还要简单一点 理解了这个结构,自己打出来的,但是小错误还是很多,越来越熟练吧希望 错误函数updata,updata_lca,query||错误地方区间往下递归的时候是left ...

  10. D3_book 11.2 stack

    <!-- book :interactive data visualization for the web 11.2 stack 一个堆叠图的例子 --> <!DOCTYPE htm ...