小程序json解析第一种格式
that.setData({ goldData: res.data.result[0], //result里多了个{}所以要标个[0] })
wxml
<text class="title">黄金数据</text>
<block wx:for="{{goldData}}" wx:key="this">
<view class="gold">
<view class="variety">|品种:{{item.variety}}</view>
<view class="latestpri">|最新价:{{item.latestpri}}</view>
<view class="openpri">|开盘价:{{item.openpri}}</view>
<view class="maxpri">|最高价:{{item.maxpri}}</view>
<view class="minpri">|最低价:{{item.minpri}}</view>
<view class="limit">|涨跌幅:{{item.limit}}</view>
<view class="yespri">|昨收价:{{item.yespri}}</view>
<view class="totalvol">|总成交量:{{item.totalvol}}</view>
<view class="time">|更新时间:{{item.time}}</view>
<view class=\'dLine\'>--------------------------------</view>
</view>
</block>
js
Page({ onLoad: function () { var that = this; wx.request({ url: \'http://www.intmote.com/myproject/test/new_file.json\', header: { \'content-type\': \'application/json\' }, success: function (res) { console.log(res.data) that.setData({ goldData: res.data.result[0], }) } }) } })
小程序json解析第二种格式
_this.setData({ list_data: res.data.imgListData, //res代表success函数的事件对,data是固定的,imgListData是上面json数据中imgListData })
wxml
<view class=\'list-head\'>列表测试</view> <view class=\'list-box\'> <view class=\'list-li mflex\' wx:for="{{list_data}}" wx:key="index" > <view class=\'list-img\'><image src=\'{{item.imgUrl}}\'></image></view> <view class=\'list-tit\'><text>{{item.id}}、{{item.title}}</text></view> <view class=\'list-con\'><text>单价{{item.unitprice}}元/m²</text></view> <view class=\'list-adr\'><text>{{item.city}}</text></view> <view class=\'list-tag\'> <text class=\'tag_{{index}}\' wx:for="{{item.tag}}" wx:for-item="cell" wx:key="index" >{{cell.tags}}</text> </view> </view> </view>
js
Page({ /** * 页面的初始数据 */ data: {}, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = this wx.request({ url: \'http://www.intmote.com/myproject/test/new_file2.json\',//json数据地址 headers: { \'Content-Type\': \'application/json\' }, success: function (res) { //console.log(res.data.imgListData) //console.log(res.data.imgListData[0].tag) //将获取到的json数据,存在名字叫list_data的这个数组中 _this.setData({ list_data: res.data.imgListData, //res代表success函数的事件对,data是固定的,imgListData是上面json数据中imgListData }) } }) } })
小程序json解析第三种格式
that.setData({ list: res.data, //res代表success函数的事件对,data是固定的,list是数组 })
wxml
<view wx:for="{{list}}" wx:key="list">
<view class=\'item-container\'>{{item.id}}</view>
</view>
wxss\
.item-container{ border: 5px solid #ffffff; height: 110rpx; line-height: 110rpx; margin-bottom:4rpx; text-align: center; background: #f6c8fb; color: #ffffff; }
js
Page({ data: { }, onLoad: function () { var that = this wx.request({ url: \'http://www.intmote.com/myproject/test/new_file3.json\', headers: { \'Content-Type\': \'application/json\' }, success: function (res) { //将获取到的json数据,存在名字叫list的这个数组中 that.setData({ list: res.data, //res代表success函数的事件对,data是固定的,list是数组 }) } }) } })
请发表评论