微信小程序如何调用json数据接口并解析
更新时间：2019年06月29日 11:22:38 作者：祈澈菇凉
这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
开始写js，用request请求接口url，当请求成功的时候，在控制台打印一下返回的res.data数据，在控制台可以看到打印了接口数据了，在请求接口成功之后，用setData接收数据，并且需在data中声明一个接收数据的变量。
Page({
data: {
list: []
},
onLoad: function (options) {
wx.request({
url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=h5&needNewCode=1&tpl=3&page=detail&type=top&topid=27&_=1519963122923',
header: {
'content-type': 'application/json'
},
success: res => {
console.log(res.data)
this.setData({
//第一个data为固定用法
list: res.data
})
}
})
},
})
这个时候可以看到，应用程序数据AppData里面，整个json数据全部都已经放在了list集合里面了。
js写完之后，现在开始写wxml里面的内容，将数据渲染在界面，这个我想重点的写一下，因为对于json的处理上是很重要的一个事情，很多人都会在解析json的时候出现这样或者那样的问题，导致页面数据渲染不出来，达不到自己的预期效果。
1：取到songlist里面指定的值
比如说，我现在想把截图里面红色框框里面数据渲染到前端
在wxml里面写代码
<view>
{{list.songlist[2].data.albumdesc}}
</view>
这个时候，可以看到小程序界面，页面已经渲染出了自己想要的数据了。
2：想要把json里面的巅峰榜，新歌的数据和图片渲染到页面，道理其实是一样的。
wxml:
<view>
{{list.topinfo.ListName}}
<image src="{{list.topinfo.MacDetailPicUrl}}" class='in-image'>
</image>
</view>
渲染成功，显示如下：
3：循环展示songlist的Array内容（100首歌曲排名的api），这里没写布局页面篇幅不够我只展示了albumname的内容，可以根据实际项目需要展示。
wxml
<view wx:for="{{list.songlist}}" wx:key="index"><!-- 取到songlist里面的内容并且进行循环 -->
{{item.data.albumname}}
</view>
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript获取客户端IP的小程序，下面的代码是我在所有windowsNT5.0及以上的系统上都测试通过的，喜欢的朋友可以收藏下2013-11-11
这篇文章主要介绍了JS highcharts实现动态曲线代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
当一串数字的时候，很多浏览器不能自动换行，所以可以借助js来实现。2010-08-08
JavaScript语法集锦是对javascript常用函数的一些小结，比较实用，建议收藏，方便查找需要的资料。2009-11-11
这篇文章主要为大家详细介绍了JavaScript字符串检索字符的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
EJS是一种简单而灵活的模板引擎，用于将数据动态渲染到网页上，本文将从介绍EJS的背景和起源开始，详细介绍EJS的特性和使用方法，包括安装配置、基本语法和标签、数据绑定和逻辑控制、模板的继承和包含等方面，感兴趣的同学跟着小编一起来学习吧2023-06-06
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
才华横溢的Stoyan Stefanov，在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情2012-01-01
本文为大家介绍下如何为使用js为鼠标添加右击事件防止默认的右击菜单弹出，感兴趣的朋友可以参考下，希望对大家有所帮助2013-07-07
这篇文章主要介绍了JS中图片base64转file文件的两种方式,实现把图片的base64编码转成file文件的功能，然后再上传至服务器，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了javaScript的函数对象的声明详解,需要的朋友可以参考下2015-02-02
最新评论