微信小程序如何調用json數(shù)據(jù)接口并解析
開始寫js，用request請求接口url，當請求成功的時候，在控制臺打印一下返回的res.data數(shù)據(jù)，在控制臺可以看到打印了接口數(shù)據(jù)了，在請求接口成功之后，用setData接收數(shù)據(jù)，并且需在data中聲明一個接收數(shù)據(jù)的變量。
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
})
}
})
},
})
這個時候可以看到，應用程序數(shù)據(jù)AppData里面，整個json數(shù)據(jù)全部都已經放在了list集合里面了。
js寫完之后，現(xiàn)在開始寫wxml里面的內容，將數(shù)據(jù)渲染在界面，這個我想重點的寫一下，因為對于json的處理上是很重要的一個事情，很多人都會在解析json的時候出現(xiàn)這樣或者那樣的問題，導致頁面數(shù)據(jù)渲染不出來，達不到自己的預期效果。
1：取到songlist里面指定的值
比如說，我現(xiàn)在想把截圖里面紅色框框里面數(shù)據(jù)渲染到前端
在wxml里面寫代碼
<view>
{{list.songlist[2].data.albumdesc}}
</view>
這個時候，可以看到小程序界面，頁面已經渲染出了自己想要的數(shù)據(jù)了。
2：想要把json里面的巔峰榜，新歌的數(shù)據(jù)和圖片渲染到頁面，道理其實是一樣的。
wxml:
<view>
{{list.topinfo.ListName}}
<image src="{{list.topinfo.MacDetailPicUrl}}" class='in-image'>
</image>
</view>
渲染成功，顯示如下：
3：循環(huán)展示songlist的Array內容（100首歌曲排名的api），這里沒寫布局頁面篇幅不夠我只展示了albumname的內容，可以根據(jù)實際項目需要展示。
wxml
<view wx:for="{{list.songlist}}" wx:key="index"><!-- 取到songlist里面的內容并且進行循環(huán) -->
{{item.data.albumname}}
</view>
效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
搜了搜這個，發(fā)現(xiàn)找不到答案。所以自己寫了一個，很多程序繞過這個問題，往往人工來決定在何處截斷 ，太麻煩了。2008-07-07
Javascript中檢查數(shù)據(jù)類型一直是老生常談的問題,類型判斷在web開發(fā)中也有著非常廣泛的應用,所以下面這篇文章主要給大家介紹了關于JS數(shù)據(jù)類型檢測的那些事,需要的朋友可以參考下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支持從外部讀取數(shù)據(jù)進行圖形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML數(shù)據(jù)結構，下面這篇文章主要給大家介紹了D3.js中CSV表格文件讀取的相關資料，需要的朋友可以參考下。2017-06-06
這篇文章主要給大家介紹了關于uniapp圖片展示自適應等比例縮放方法的相關資料,在uniapp頁面展示中會遇到圖片展示問題,等比縮放或者自適應view大小,需要的朋友可以參考下2023-10-10
基于 webpack2 實現(xiàn)的多入口項目腳手架詳解
這篇文章主要給大家介紹了基于 webpack2 實現(xiàn)的多入口項目腳手架的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
JavaScript實現(xiàn)動態(tài)添加，刪除行的方法實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)添加，刪除行的方法,較為詳細的分析了javascript操作table表格實現(xiàn)針對表格元素動態(tài)操作的相關技巧,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了Rxjs?TakeUntil操作符內容梳理總結，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06