微信小程序如何调用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>
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
搜了搜这个，发现找不到答案。所以自己写了一个，很多程序绕过这个问题，往往人工来决定在何处截断 ，太麻烦了。2008-07-07
Javascript中检查数据类型一直是老生常谈的问题,类型判断在web开发中也有着非常广泛的应用,所以下面这篇文章主要给大家介绍了关于JS数据类型检测的那些事,需要的朋友可以参考下2021-09-09
BootStrap表单控件之复选框checkbox和单选择按钮radio
这篇文章主要介绍了BootStrap表单控件之复选框checkbox和单选择按钮radio的相关资料,需要的朋友可以参考下2017-05-05
很多时候，需要对Yii表单model中的对象设置的rules进行判断，但是有的时候可能需要在提交之前就在客户端进行验证。怎么处理呢？接下来通过本文给大家分享yii form 表单提交之前JS在提交按钮的验证方法，需要的的朋友参考下2017-03-03
这篇文章主要介绍了将json对象转换为字符串的方法,需要的朋友可以参考下2014-02-02
D3.js支持从外部读取数据进行图形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构，下面这篇文章主要给大家介绍了D3.js中CSV表格文件读取的相关资料，需要的朋友可以参考下。2017-06-06
这篇文章主要给大家介绍了关于uniapp图片展示自适应等比例缩放方法的相关资料,在uniapp页面展示中会遇到图片展示问题,等比缩放或者自适应view大小,需要的朋友可以参考下2023-10-10
这篇文章主要给大家介绍了基于 webpack2 实现的多入口项目脚手架的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了JavaScript实现动态添加，删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Rxjs TakeUntil操作符内容梳理总结，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
最新评论