收藏
回答

同一标签如何遍历两组数据

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 wx:for 工具 2.4.2 2.4.2

- 需求的场景描述(希望解决的问题)

有两个数组在同一个标签内遍历,如何两组数据互不干扰

- 希望提供的能力


arr1:[

a:

{

title:"title",

address:"address"

},

b:

{

title:"title",

address:"address"

},

c:

{

title:"title",

address:"address"

}

]



arr2:[

d:

{

name:"name",

url:"url"

},

e:

{

name:"name",

url:"url"

},

f:

{

name:"name",

url:"url"

}

]



在<view wx:for="">title:name;address:url</view>



最后一次编辑于  01-15  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

9 个回答

  • 明天见
    明天见
    01-15

    不能再 js 文件中处理好这个逻辑,然后 wxml 只是做渲染吗?

    01-15
    赞同 1
    回复 1
    • Max Jin
      Max Jin
      01-15

      小程序有点方,没有dom可操作。。。

      01-15
      回复
  • 星际骑兵
    星际骑兵
    01-17

    我也遇到过这个问题,感觉还是得用js或者在后台先把两个数据合并在一起,wxml里只用一个wx:for来渲染。其他方法可能比这个还麻烦。

    01-17
    赞同 1
    回复 1
    • Max Jin
      Max Jin
      01-17

      是的。

      01-17
      1
      回复
  • 诗·昂
    诗·昂
    01-15

    list:{

    a:[1,2,3],

    b:[4,5,6]

    }

    01-15
    赞同
    回复 8
    • 诗·昂
      诗·昂
      01-15

      list:[

      {a:1,b:2},

      {a:3,b:4}

      ]

      01-15
      回复
    • 诗·昂
      诗·昂
      01-15

      感觉一下 :(

      01-15
      回复
    • 明天见
      明天见
      01-15回复诗·昂

      没有感觉出什么,不明白你的意思。

      01-15
      回复
    • Max Jin
      Max Jin
      01-15回复诗·昂

      <view wx:for="">arr1:arr2</view>

      arr1:[

      a:xxx,

      b:xxx,

      c:xxx

      ]

      arr2:[

      d:xxx,

      e:xxx,

      f:xxx

      ]

      就是大概这个样子,给了两个数组,分别遍历成a:d,b:e,c:f这种情况



      01-15
      回复
    • 诗·昂
      诗·昂
      01-15

      https://developers.weixin.qq.com/s/IcbmMrmu7Y5y

      写了半天,还想你要是两个数组多简单,这两个对象麻烦,没想到,差评

      01-15
      回复
    查看更多(3)
  • 卢霄霄
    卢霄霄
    01-15

    没懂

    01-15
    赞同
    回复 10
    • Max Jin
      Max Jin
      01-15

      <view wx:for="">arr1:arr2</view>

      arr1:[

      a:xxx,

      b:xxx,

      c:xxx

      ]

      arr2:[

      d:xxx,

      e:xxx,

      f:xxx

      ]

      就是大概这个样子,给了两个数组,分别遍历成a:d,b:e,c:f这种情况


      01-15
      回复
    • 卢霄霄
      卢霄霄
      01-15回复Max Jin

      如果能确定两个长度一致

      <view wx:for="{{arr1}}">item:arr2[index]</view> 或者

      <view wx:for="{{arr1.length}}">arr1[index]:arr2[index]</view>

      01-15
      回复
    • Max Jin
      Max Jin
      01-15回复卢霄霄

      要是里面的abc是

      [

      title:"title",

      address:"address"

      ]

      def是

      [

      name:"name",

      url:"url"

      ]

      这种情况如何?


      01-15
      回复
    • 卢霄霄
      卢霄霄
      01-15回复Max Jin

      [title:"title"] 有这种写法的吗!

      不过我看起来,你这个只是想显示一行两个内容,用view的话display:inline-block,或者 flex-wrap: wrap就行

      01-15
      回复
    • Max Jin
      Max Jin
      01-15回复卢霄霄

      ...不是,我把上面的问题写成数组了,你看下

      01-15
      回复
    查看更多(5)
  • Max Jin
    Max Jin
    01-15

    <view wx:for="">arr1:arr2</view>

    arr1:[

    a:xxx,

    b:xxx,

    c:xxx

    ]

    arr2:[

    d:xxx,

    e:xxx,

    f:xxx

    ]

    就是大概这个样子,给了两个数组,分别遍历成a:d,b:e,c:f这种情况


    01-15
    赞同
    回复
  • 好哇你个狗东西
    好哇你个狗东西
    01-16

    卢萧萧已经说得很清楚了:遍历arr1,通过遍历arr1时提供的index去访问arr2中对应的项即可。  这样做可以避免合并数组,那就好像把两个饼揉在一起,太蠢了。

    01-16
    赞同
    回复
  • Why
    Why
    01-16

    <view wx:for='{{arr1}}' wx:key='{{index}}'>{{arr1[index].title}}:{{arr2[index].name}},{{arr1[index].address}}:{{arr2[index].url}}</view>


    这个拿去试一下,你们的数据这么怪的么,还有一种就是整和两个数组为一个

    01-16
    赞同
    回复 8
    • 卢霄霄
      卢霄霄
      01-17

      。。不要怪我多嘴哦。。wx:key是指定循环的数组里面每一项的属性名字,建议使用switch的demo试试怎么设置。

      01-17
      回复
    • Why
      Why
      01-17回复卢霄霄

      这个无所谓呀,照样可以的,成大事者不拘小节。

      01-17
      回复
    • Why
      Why
      01-17回复Why

      或者把index改成*this,表示他自己。

      01-17
      回复
    • 卢霄霄
      卢霄霄
      01-17回复Why

      如果不是基础类型的数组的话,*this也是无效的哦。。我对wx:key误会了很久。直到做删除的时候才发现问题~算了 我不说了。。溜了溜了

      01-17
      回复
    • 沈岸(志华软件)
      沈岸(志华软件)
      01-17回复卢霄霄

      不能用js合并??这是我刚才写的。。。。

      var obj1 = [{a: 1}, {a: 2}, {a: 3}, {a: 4}];

      var obj2 = [{b: 1}, {b: 2}, {b: 3}];


      var count1 = obj1.length;

      var count2 = obj2.length;


      if (count1 >= count2) {

      for (var i in obj1) {

      Object.assign(obj1[i], obj2[i])

      }

      var returnobj = obj1;

      else {

      for (var i in obj2) {

      Object.assign(obj2[i], obj1[i])

      }

      var returnobj = obj2;

      }

      //返回新的数据 returnobj


      01-17
      回复
    查看更多(3)
  • 炜炎
    炜炎
    01-17

    小程序是数据驱动的,处理好数据再渲染吧,如果官方开放这种能力不就等于官方帮你处理数据了吗,而且你这种数据返回应用的场景很少,处理起来也不难,我觉得还是自己做一下数据处理吧,或者让后台给你处理一下,不过建议在前端处理,不用消耗服务器资源

    01-17
    赞同
    回复 1
    • Max Jin
      Max Jin
      01-17

      嗯嗯,谢谢

      01-17
      回复
  • 沈岸(志华软件)
    沈岸(志华软件)
    01-17

    var obj1 = [{a: 1}, {a: 2}, {a: 3}, {a: 4}];

    var obj2 = [{b: 1}, {b: 2}, {b: 3}];


    var count1 = obj1.length;

    var count2 = obj2.length;


    if (count1 >= count2) {

    for (var i in obj1) {

    Object.assign(obj1[i], obj2[i])

    }

    var returnobj = obj1;

    } else {

    for (var i in obj2) {

    Object.assign(obj2[i], obj1[i])

    }

    var returnobj = obj2;

    }

    //返回新的数据 returnobj

    returnobj=[{a:1,b:1},{a:2,b:2},{a:3,b:3},{a:4}]

    是这样的吗???


    01-17
    赞同
    回复 2
    • 沈岸(志华软件)
      沈岸(志华软件)
      01-17

      如果是对的,你确定两个JSON 对象长度是一样的,就不用判断哪个大哪个小,直接合并就行

      01-17
      回复
    • Max Jin
      Max Jin
      01-17回复沈岸(志华软件)

      好的,谢谢

      01-17
      回复