微信小程序如何调用json数据接口并解析

开始写js，用request请求接口url。请求成功后，在控制台上打印返回的res.data数据。您可以看到界面数据打印在控制台上。请求成功后，使用setdata接收数据，并在data中声明一个用于接收数据的变量。

Page({ data: { list: [] }，onLoad:函数(选项){ wx . request({ URL : ' https://c . y . QQ.com/V8/fcg-bin/fcg _ V8 _ toplist _ CP . fcg？g _ tk=5381 uin=0 format=jsoninCharset=utf-8 outcharset=utf-8 ice=0 platform=H5 neednew code=1tpl=3 page=detailtype=toptopid=27 _=1519963122923 '，header : { ' content-type ' : ' application/JSON ' }，success 3360 RES={ console . log(RES . data)this . setdata({//第一个数据是

此时，我们可以看到应用程序数据AppData中的整个json数据已经放入了列表集合中。

js完成后，现在我开始用wxml编写内容，并在接口上呈现数据。我之所以要写这一点，是因为对于json处理来说这是一件非常重要的事情，很多人在解析json的时候都会出现这样那样的问题，导致页面数据没有呈现出来，达不到预期的效果。

1:获取songlist中指定的值

例如，现在我想将截图中红色框架中的数据渲染到前端

用wxml编写代码

查看{ { list }。歌曲列表[2]。data.album desc}}/view这时，可以看到小程序界面，页面已经呈现出你想要的数据。

2.如果你想把json中的顶级列表、新歌数据和图片渲染到页面上，其实道理是一样的。

wxml:

视图{ { list }。topinfo . listname } } image src=' http 3360 { { list }。topinfo . macdetailpicurl } } ' class=' in-image '/image/view已成功渲染，如下所示：

3:循环显示歌曲列表的Array内容(排名100首歌曲的api)。布局页面上没有足够的空间。我只展示了albumname的内容，可以根据实际项目需要进行展示。

页面结构

view wx : for=' { { list . song list } } ' wx : key=' index '！-获取歌曲列表和循环的内容-{-{ { item . data . album name } }/view }/view具有以下效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。