微信小程序循环输出数组里的取值

已于 2023-03-23 08:49:03 修改
阅读量3k 收藏 2
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
于 2023-03-22 19:56:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_49416650/article/details/129717911
版权
文章讨论了小程序使用JS获取后端返回的值，并通过其特有的WXML语法进行循环输出显示，指出其在数据展示方式上与PHP有相似之处，但具有独特的语法结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做的时候，发现小程序是有自己的语法封装的

1，我先通过js获取到后端返回的值 如下：

2，在wxml的显示，是用它的语法循环输出显示，除了语法，这和php数据显示格式一样方便：

【微信小程序】微信小程序预备知识：JavaScript语法入门
墨夶的博客
11-12 828
通过本文的介绍，相信你已经对JavaScript的基本语法有了初步的了解。JavaScript是实现小程序复杂功能的重要工具，掌握好JavaScript可以帮助你更好地控制小程序的行为，实现更多的功能。希望你能将这些知识应用到实际开发中，创造出更多优秀的作品！
微信小程序如何从数组里取值_微信小程序data的赋值与取值的几种方式
weixin_31857829的博客
02-12 4000
目录通过小程序官方文档可知(传递单个值)：传递数组：微信小程序 跳转传参数 传对象通过小程序官方文档可知：Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据，WXML 中的动态数据均来自对应 Page 的 data。所以如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。页面js文件...
微信小程序如何从数组里取值_微信小程序获取各种数据值跟设置数据值
weixin_39918248的博客
12-22 7865
微信小程序获取各种数据值跟设置数据值。修改设置data数组中的某个值://小程序接收后台数据若为数组时，下标最好为默认索引数组，从0开始排序vararticleId='1'//对应数组中的索引值varthisArticle="articleList["+articleId+"].iscollection"console.log(thisArticle);that.setData(...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结
weixin_31302909的博客
02-12 6544
小程序里常见的取值有以下几种，一个完整的项目写下来，用到的概率几乎是100%。列表index下标取值页面传值form表单取值1. 列表index下标取值实现方式是：data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可。1.1 生成值1删除在删除图标与文字添加data-index="{{index}}"自定义属性以及绑定点击事件bi...
微信小程序循环数组、对象
最新发布
yunyun1110_的博客
04-23 566
数据- > meals: { breakfast: false, lunch: false, dinner: false, temp: true }breakfast: '早餐',dayName: '周一',dayName: '周二',dayName: '周三',dayName: '周四',dayName: '周五',dinner: '晚餐',lunch: '午餐',temp: '临时餐'
奥维导入的内容都不显示了_80%的人都不知道的直播运营内容法则，学好了人气翻倍...
weixin_39892615的博客
11-14 175
直播网红千千万，谁能争当NO.1？随着直播崛起，越来越多的人想要入场分一杯羹，BUT,80%的人都不懂直播运营的内容法则。那么，新手主播怎么玩才能快速脱颖而出呢？掌握这四大直播运营的内容规则，人气轻松翻倍！1. 直播内容多样化主播想要保证直播间人气不减，那么新鲜感是必不可少的东西。不论是直播内容主题还是直播形式变化，只要保证多样化与新鲜感，那么就能具备持续吸引用户的特点。具体的玩法还能根据多样化的...
微信小程序如何从数组里取值_微信小程序数据存储与取值详解
weixin_39708737的博客
12-22 3932
在小程序开发的过程，经常要需要这个页面输入的数据，在下一个页面中进行取值赋值。比如：在A页面input输入框，输入电话号码，点击添加。需要在B页面电话区域中，显示刚刚输入的电话号码。因为这是两个页面，就需要先存储，再取值。微信小程序提供了数据存储的API，wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中，如果重复会覆盖掉原来该 key 对应的内容。思路是，在...
微信小程序直接返回数组每一项的值
weixin_46504346的博客
06-26 957
这段代码会将res.data数组中的每一项映射为一个新的对象，新对象里面只包含"id"和"name"两个属性，并把映射后的所有新对象组成一个新的数组，最终把这个新的数组设置为小程序页面的"data"里面的"picture"属性的值。这样，就可以在页面上通过{{picture[index].id}}和{{picture[index].name}}获取到每一项的"id"和"name"值。})里面picture直接返回数组里面每一项的值。要求：在请求到的数组this.setData({
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
03-29
小程序中的遍历循环类似于angularJS的遍历。 二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。（代码如下） JS代码：   data: { groups: [ [ { title: '狼图腾', cover: '../../img/mineBG.png' }, { ...
微信小程序读取服务器多个数组,微信小程序多层嵌套循环，二级数组遍历
weixin_29023445的博客
08-05 2452
小程序中的遍历循环类似于angularJS的遍历。二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。(代码如下)JS代码：data: {groups: [[{title: '狼图腾',cover: '../../img/mineBG.png'},{title: '狼图腾',cover: '../../img/mineBG.png'},],[{title: '狼图腾',cover: '...
微信小程序获取复选框全选反选选中的值(实例代码)
10-15
在微信小程序开发中，获取复选框全选与反选的选中值是一个常见需求。本文将详细讲解如何通过实例代码实现这一功能，并会详细说明相关知识点。 首先，我们需要了解微信小程序中几个关键组件的使用方法，包括`...
微信小程序实现同一页面取值的方法分析
10-17
在微信小程序开发中，同一页面取值是一个非常基础而重要的操作，它涉及到小程序中各个文件（如wxml、wxss和js）之间的数据传递和交互。由于微信小程序具有其独特的框架结构，因此了解和掌握在同一页面内如何高效地...
微信小程序传值以及获取值方法的详解
01-03
微信小程序传值以及获取值方法，传值有两种方法，对应也有获取值得方法， 1、设置id的方法标识跳转后传递的参数值； 2、通过使用data – xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值 在要跳转的item处，设置一个id并给当前的id赋值上对应的key值，比如一部电影的id（后面带着id去下一个页面查询，详细信息）如： 后我们在js的bindtap的响应事件中获取，并传递到下一个界面中； 获取到id传的值 通过e.currentTarget.id;获取设置的id值，并通过设置全局对象的方式来传递数值， 获取全局对象 var app=getApp(); //设置全局的请
微信小程序中得到循环列表选中行的数据
xiaommxhxxl的博客
06-03 1555
微信小程序中得到循环列表的数据
小程序开发--- 1. 获取数组中某个字段的值或获取列表索引
热门推荐
a814057962的博客
06-21 2万+
最近开始自己琢磨开发微信小程序，遇到些问题，现在做一下总结。 今天有遇到一个需要获取到列表中某一项值，并在其他地方调用的问题。其实思路和获取列表索引的道理一样。如果你还不知道如何获取列表的索引，那么现在我先给大家介绍一下： 1. 大家都知道小程序的.wxss文件类似于css文件，主要用于处理视图的样式。所以，第一步，我们在.wxss文件中先随意写上一个样式，如下所示： ...
微信小程序如何从数组里取值_微信小程序 怎么数组里面值
weixin_39987985的博客
12-22 2654
对于域名和服务器的选择上，要看微信小程序制作方是否硬性需要进行绑定开发，如果没有规定绑定开发的话可以自主选择域名和服务器，像这个在阿里云或iisp都是有相关服务的。具体方法：先在utils文件夹粘贴一个io的js然后 npm install wxapp-socket-ioconfig文件夹下新建一个socket.js,对socket连接进行封装，如下：const io = require('../...
微信小程序---获取并更新data中二维数组的值
池海
05-12 4127
文章目录前言场景一、点击事件传值 前言 之前的微信点餐平台依然在缓慢的开发着，之前初步完成了购物车界面。后面在补充业务逻辑功能的时候由于自己之前没有小程序开发经验遇到了一些小小的问题特此记录下。 场景 这里要新增购物车基础功能，首先说明下菜单数据格式。我后端返回的是一个二维数组，一维最外层放置的是根据菜单分类的对象如人气TOP10,无肉不欢等。分类对象中用第二维数组对象存放具体分类对应的菜品信息。下面是我刚开始写死的假数据用来进行下面的演示： 通过使用data-形式把我们需要的值传入点击事件对象，函
【小程序开发】页面传取值(数组,对象,字符串)
Enchanted to meet U
07-28 1100
记录微信小程序页面之间的传值取值 一、按方式分类 小程序传递参数的方式有三种： 通过在App.js中设置全局变量 通过拼接URL直接传递 通过数据缓存存储再获取 1.使用全局变量globalData 通常把不更改的常量数据放在app.js中,在各个页面都可以通过App实例获取Data的数据. 最外层的app.js中定义全局变量 globalData: { js_code:null } 可以在page1的登陆函数中设置值 wx.login({ success: function.
微信小程序 - 循环
m0_52163529的博客
03-21 2671
前端代码编写中，循环的使用是必不可少的，只要有相似内容的列表存在，大概率就会使用到循环，如：商品列表、每月收益、排行榜等。
微信小程序 js循环数组
02-07
### 关于微信小程序中使用JavaScript循环遍历数组的方法 在微信小程序环境中，可以采用多种方式来遍历数组。以下是几种常用的方式及其示例： #### 使用 `for` 循环 这是最基础也是最常见的遍历方法之一。通过指定起始索引、终止条件以及每次迭代后的操作来进行遍历。 ```javascript var arr = [{ name: '小红' }, { name: '小张' }]; for (let i = 0; i < arr.length; i++) { console.log(arr[i].name); } ``` #### 使用 `forEach()` 方法 此方法接受一个回调函数作为参数，在每一次迭代时都会调用这个函数，并传入当前元素、索引及整个数组给它处理[^1]。 ```javascript arr.forEach(function(item, index){ console.log(`Index ${index}:`, item.name); }); // 或者箭头函数形式 arr.forEach((item, index) => console.log(`Index ${index}:`, item.name)); ``` #### 使用 `some()` 方法进行特定条件下的查找 当需要检查数组内是否有至少一项满足某条件时可选用这种方法。一旦找到符合条件的第一项就会立即停止并返回`true`; 否则最终会返回`false`. ```javascript const res = arr.some(item => item.name === '小李'); console.log('是否存在名为"小李"的对象:', res); // 输出结果取决于数据集实际情况 ``` #### 修改数组并通过setData更新视图 如果是在微信小程序上下文中涉及到UI组件的数据绑定，则可能还需要考虑如何将更改过的数组重新设置回页面状态以便触发界面刷新[^4]。 ```javascript this.setData({ ['arrayName']: modifiedArray, }) ``` 以上就是在微信小程序里利用JavaScript实现的不同类型的数组遍历技术概览。每一种都有其适用场景，请依据具体需求选取合适的方式来解决问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值