How to display json data through api interface

This article will explain in detail how to display json data through the api interface. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

An important knowledge premise for realizing Zhihu client is to know how to display data to WeChat Mini Programs through Zhihu news interface.

So let's first learn how to display the data obtained by the interface to WeChat Mini Programs.

1. The knowledge points used

Wx.request requests API resources (the initiating request part of WeChat Mini Programs's api)

Realizing the components of Carousel Graph by swiper

Wx:for loop statement

The basic knowledge of WeChat Mini Programs

two。 Realization principle

First, take a look at the request function.

Wx.request ({url:'*', / / fill in your interface path header: {/ / write down the type of data returned under your excuse here, which shows the power of WeChat Mini Programs to parse the data directly for you, and no longer have to find various methods to parse json Xml and other data such as' Content-Type': 'application/json'}, data: {/ / write the parameters you want to request x:'', y:'}, success: function (res) {/ / after the request is successful, perform some function operations console.log (res.data)}})

3. Code

Decomposition graph

First of all, the beginning of the previous paragraph in the json format of the interface data

"date": "20161114", "stories": [{"images": ["http://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"]," type ": 0," id ": 8975316," ga_prefix ":" 111422 "," title ":" small things I am just like you "}, {" images ": [" http://jb51.net/7c908a5940384123fd88287dbc6a2c98.jpg"], "type": 0 "id": 8977438, "ga_prefix": "111421", "title": "grow Who says it means you have to grow up? " }

In index.js

Page ({data: {duration: 2000, indicatorDots: true, autoplay: true, interval: 3000, loading: false, plain: false}, onLoad: function () {var that = this// Don't miss this sentence It is very important that the json data to be obtained by wx.request ({url: 'http://news-at.zhihu.com/api/4/news/latest', headers: {' Content-Type': 'application/json'}, success: function (res) {/ /) exists that.setData ({zhihu: res.data.stories, / / res represents the event pair of success function in this array called zhihu, data is fixed Stories is the stories in the above json data})}})

In index.wxml

/ / the attributes in this are not important. See {{item.title}} below.

After reading this code, you will think, according to WeChat Mini Programs's binding principle, where the code inside called onLoad () this function, do not think about it, WeChat Mini Programs omitted these steps for you. Just call the array zhihu directly.

This is the end of the article on "how to display json data through the api interface". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.