微信小程序 wxml文件中嵌套循环

野性酷女 2022-02-27 08:07 221阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

1、服务器获取到的数组中嵌套 对象组成的数组，控制台输出：

![Image 1][]

2、解析并绑定服务器获取到的数据，.js文件：

![Image 1][]

3、绑定一层的shopList数据， .wxml文件：

![Image 1][]

4、绑定shopList数组中的二层equips数据，.wxml文件 中 只需要item.equips即可

![Image 1][]

最开始循环获取到数据后，总以为需要嵌套循环出二层数组对象，并分别绑定数据。兜兜转转绕了一大圈，发现只要将一级数组循环获取到，二层数组对象直接“item.xxx”就可以在wxml文件中直接进行数据绑定了。

作者：圆圆小宇宙  
链接：https://www.jianshu.com/p/deaed08d1d5d  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug 1]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 1]
 *  [不要争了！技术选择没那么重要][Link 2]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[Fundebug 1]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 1]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 2]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/