微信小程序如何调用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>

效果如下：

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

赞 (0)

相关推荐

  • 微信小程序通过api接口将json数据展现到小程序示例

    微信小程序通过api接口将json数据展现到小程序示例

    实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

  • ajax调用返回php接口返回json数据的方法(必看篇)

    php代码如下: <?php header('Content-Type: application/json'); header('Content-Type: text/html;charset=utf-8'); $email = $_GET['email']; $user = []; $conn = @mysql_connect("localhost","Test","123456") or die("Failed in conn

  • 原生js调用json方法总结

    Ajax基础 ajax:无刷新数据读取,读取服务器上的信息 HTTP请求方法: GET:用于获取数据,如浏览帖子 ajax.judgeXmlHttpRequest('get', 'index.php', function(data){ alert(data); //这是服务器返回的数据 }) POST:用于上传数据,如用户注册 var dataJson = { name: 'ys',age: 123 } ajax.judgeXmlHttpRequest('post', 'index.php',

  • JavaScript跨域调用基于JSON的RESTful API

    1. 基本术语 AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML):AJAX是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. JSON(JavaScript Object Notation):JSON是一种轻量级的数据交换格式,可以看成是由大括号包裹起来的多个"key/value"对,格式如下:{"f

  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun

  • json跨域调用python的方法详解

    本文实例讲述了json跨域调用python的方法.分享给大家供大家参考,具体如下: 客户端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • 微信小程序学习(4)-系统配置app.json详解

    微信小程序学习(4)-系统配置app.json详解

    "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#f0f", "navigationBarTitleText": "我的微信小程序", "navigationBarTextStyle":"black", "backgr

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

    微信小程序如何调用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=538

  • 微信小程序后台解密用户数据实例详解

     微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的

  • 微信小程序和百度的语音识别接口详解

    介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 windows 10 vs code 1.20.1 微信小程序开发工具 1.02.1802270 花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序 考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面) 文件目录 页面 index.wxml

  • 微信小程序云函数添加数据到数据库的方法

    1.新建小程序,建立云开发快速启动模板 这里和普通小程序的区别有三点 一是 project.config.json写上云函数所在目录"cloudfunctionRoot": "cloudfunctions/", 二是app.json写上"cloud":true 三是 app.js 添加,用于记录访问用户 onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础

  • 微信小程序多列表渲染数据开关互不影响的实现

    最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家 <!--pages/list/list.wxml--> <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

  • 微信小程序 跳转传递数据的实例

    微信小程序 跳转传递数据的实例

    微信小程序 跳转传递数据的实例 点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  dat

  • 微信小程序Page中data数据操作和函数调用方法

    Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js Page({ data: { text: "This is page data.", sliderOffset: 0, sliderLeft: 0, state:{ genre:[], genre_index: 0, model:[], model_index: 0, terminalStatus:'', } }, onLoad: functio

  • 微信小程序云开发实现数据添加、查询和分页

    微信小程序云开发实现数据添加、查询和分页

    本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,

  • 微信小程序 setData 对 data数据影响问题

    我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作.偶然之下,发现了setdata 的一些机制,也有可能不对,请多指教. 先放结论:data的变量通过setdata绑在一起,是同步变化的 准备做一个一键还原界面的按钮事件,如果有后端接口,只需调一下接口,就可以了.问题是没有,于是想弄两个一模一样的数组A,B:A用来渲染界面,一键还原的时候,就把B的值赋给A,从而引起页面重新渲染,达到重置界面的效果. 结果一点反应也没有. data里有模拟的数组  itemleft  itemright,

  • 微信小程序页面调用自定义组件内的事件详解

    这篇文章主要介绍了微信小程序页面调用自定义组件内的事件详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 page page.json { "usingComponents": { "my-component": "../components/component/component", } } page.wxml <my-component id="myComponent&quo

随机推荐