微信小程序调用API 如何解析这个json?

[{"id":1,"img":"https://images.unsplash.com/photo-1551446591-142875a901a1?w=640","name":"f1"},
{"id":2,"img":"https://images.unsplash.com/photo-1551446591-142875a901a1?w=640","name":"f2"},
{"id":3,"img":"https://images.unsplash.com/photo-1551446591-142875a901a1?w=640","name":"f3"}]
怎么把三条数据都显示在界面上?
图片说明
图片说明
图片说明
图片说明

图4这个数组怎么掉用啊

图片说明

图四这个数组显示不出来 将数据字段“imglist”设置为undefined无效。

图片说明

1个回答

这个数据是可以直接在小程序界面输出的,还有就是你的问题图片看不到,传图的时候换个行
更新内容
首先,你需要在这个地方
图片说明
定义一个数组来存放你的数据,比如imglist:[]这样的,然后,你的接口请求也是错误的,既然api/values可以获取3条,就用这个接口,请求方法如下:

wx.request({
      url: 'http://localhost/api/values',
      success:function(res){
        this.setData({
          imglist:res.data
        })
      }
    })

最后,在你的界面上使用这样的方式

<view wx:for="{{imglist}}">
    <text>{{item.id}}</text>
    <image src="{{item.img}}"></image>
    <text>{{item.name}}</text>
</view>

以上就是全部过程

----------------更新----------

<view wx:for="{{imglist}}" data-id="{{item.id}}" bindtap="jump">
    <text>{{item.id}}</text>
    <image src="{{item.img}}"></image>
    <text>{{item.name}}</text>
</view>

js部分:

jump:function(e){
    var id = e.currentTarget.dataset.id
    wx.navigateTo({
        url:'跳转地址'+'?id='+id
    })

}
as_csdn
取个什么名字好。 回复-海深不蓝森浓不绿: 写循环是最好的方式,如果你想跳转页面之后再调用接口获取详情,就需要在跳转时携带参数,看我答案后面更新部分
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 image怎样写最好 1写个循环 2还是三个image 因为我每个图片有个单击跳转bindtap后 在跳转页面js在调用接口显示详细信息
大约一年之前 回复
as_csdn
取个什么名字好。 回复-海深不蓝森浓不绿: 恢复晚了,不好意思。首先你的接口返回数据可能是个二维数据形式的,所以你最后一张图中打印出的结果,images是在0下面的,所以你取数据的时候应该使用这种形式:res.data[0].images
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 点击每张图片bindtap跳转显示信息
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 不知道为什么 images json数据 显示不出来 就可以 一条条取了
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 每张图片加一个 bindtap='' 事件 就不能用 wx:for 我每个页面显示信息
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 掉图四json报错 将数据字段“imglist”设置为undefined无效。 是返回的json数组写的有问题吗
大约一年之前 回复
as_csdn
取个什么名字好。 回复-海深不蓝森浓不绿: 如果你的意思是图4的话,可以在接口调用成功后使用这种方式:_this.setData({imglist:res.data.images}),这样就放进去了,其实原理就是把接口调回来的数据一次性放进事先定义好的数据变量里面
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 三条数据显示出来了 感谢大佬了!!! 现在搞不懂的就是怎样把三条数据放一个数组里 代码怎么实现 数据都是我自己随便写的 我老大让我自己写个API先测试下,之前没学过API.正在试用期
大约一年之前 回复
as_csdn
取个什么名字好。 回复-海深不蓝森浓不绿: 更新了回答
大约一年之前 回复
weixin_44984517
-海深不蓝森浓不绿 我想在小程序一个界面上显示这三个图片 但我每次只能获取到一条 请教!!!
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐