收藏
回答

如何wx:for嵌套循环遍历两个不同的数组?其中已知两个数组中的id和categories值一致。

已知存在有两个固定写法的API数组(下面)。

其中cat.api里的id值等于post.api里的categories值。需要在前端页面循环显示分类和分类下的文章。第二个循环不知道如何关联写法。请大神们看看

<block wx:key="id" wx:for="{{categoriesList}}">
    <view class="list-item">
        <view class="content-title" data-item="{{item.name}}" data-id="{{item.id}}" bindtap="redictIndex">
            <view class="topic-name">
                <text>{{item.name}}</text>
            </view>
        </view>
        <view class="common-list">
            <block wx:key="id" wx:for="{{postsList}}">
                <image src="{{item.post_medium_image}}" mode="aspectFill" class="cover"></image>
                <view class="content-title">
                    <text>{{item.title.rendered}}</text>
                </view> 
            </block>
        </view>
    </view>
</block>


需要的前端效果:


文章分类cat.api。其中cat.api里的id值等于post.api里的categories值。

[
    {
        "id": 112,
        "count": 7,
        "description": "",
        "link": "https://",
        "name": "分类CAT1",
        "parent": 120,
        "meta": [],
        "category_thumbnail_image": ""
    },
    {
        "id": 113,
        "count": 0,
        "description": "",
        "link": "https://",
        "name": "分类CAT2",
        "parent": 120,
        "meta": [],
        "category_thumbnail_image": ""
    },
    {
        "id": 126,
        "count": 4,
        "description": "",
        "link": "https://",
        "name": "分类CAT3",
        "parent": 120,
        "meta": [],
        "category_thumbnail_image": "",
    }
]


文章post.api

[
    {
        "id": 1134,
        "date": "2019-10-08T14:13:41",
        "date_gmt": "2019-10-08T06:13:41",
        "type": "post",
        "link": "",
        "title": {
            "rendered": "文章1"
        },
        "excerpt": {
            "rendered": "DESC1",
            "protected": false
        },
        "author": 1,
        "categories": [
            112
        ],
        "post_thumbnail_image": "https://",
 
    },
    {
        "id": 1131,
        "date": "2019-10-08T14:13:41",
        "date_gmt": "2019-10-08T06:13:41",
        "type": "post",
        "link": "",
        "title": {
            "rendered": "文章2"
        },
        "excerpt": {
            "rendered": "DESC2",
            "protected": false
        },
        "author": 1,
        "categories": [
            112
        ],
        "post_thumbnail_image": "https://",
    },
    {
        "id": 1128,
        "date": "2019-10-08T14:13:41",
        "date_gmt": "2019-10-08T06:13:41",
        "type": "post",
        "link": "",
        "title": {
            "rendered": "文章3"
        },
        "excerpt": {
            "rendered": "DESC3",
            "protected": false
        },
        "author": 1,
        "categories": [
            113
        ],
        "post_thumbnail_image": "https://",
    },
    {
        "id": 1125,
        "date": "2019-10-08T14:13:41",
        "date_gmt": "2019-10-08T06:13:41",
        "type": "post",
        "link": "",
        "title": {
            "rendered": "文章4"
        },
        "excerpt": {
            "rendered": "DESC4",
            "protected": false
        },
        "author": 1,
        "categories": [
            113
        ],
        "post_thumbnail_image": "https://",
    },
    {
        "id": 1022,
        "date": "2019-10-08T14:13:41",
        "date_gmt": "2019-10-08T06:13:41",
        "type": "post",
        "link": "",
        "title": {
            "rendered": "文章5"
        },
        "excerpt": {
            "rendered": "DESC5",
            "protected": false
        },
        "author": 1,
        "categories": [
            126
        ],
        "post_thumbnail_image": "https://",
    },
    {
        "id": 1075,
        "date": "2019-10-08T14:13:41",
        "date_gmt": "2019-10-08T06:13:41",
        "type": "post",
        "link": "",
        "title": {
            "rendered": "文章6"
        },
        "excerpt": {
            "rendered": "DESC6",
            "protected": false
        },
        "author": 1,
        "categories": [
            126
        ],
        "post_thumbnail_image": "https://",
    }
]


回答关注问题邀请回答
收藏

6 个回答

  • 污昂ᰔᩚ王࿐
    污昂ᰔᩚ王࿐
    2019-10-15
    <view wx:for='{{categoriesList}}'>
        <view wx:for='{{postsList}}' wx:for-item='item_p' wx:if="{{item.id == item_p.categories}}">
          {{item_p.id}}
        </view>
    </view>

    这样吗?

    2019-10-15
    有用 2
    回复 1
    • 小鱼哥
      小鱼哥
      2019-10-15
      是的,谢谢
      2019-10-15
      回复
  • 袁康
    袁康
    2019-10-15

    wx:if判断item1.id=item2.categories

    2019-10-15
    有用 1
    回复
  • 小鱼哥
    小鱼哥
    2019-10-15

    谢谢各位的解答。解决了,代码片段:https://developers.weixin.qq.com/s/RZErN8m77scx


    2019-10-15
    有用
    回复
  • 天魔&龙魂
    天魔&龙魂
    2019-10-15

    你为什么不先把两个合并成一个,然后一个for不就可以了吗?改变下数据结构不就行了,渲染和逻辑分开


    2019-10-15
    有用
    回复 1
    • 天魔&龙魂
      天魔&龙魂
      2019-10-15
      曲欣说的也可以,如果不想合并麻烦的话
      2019-10-15
      回复
  • 2019-10-15

    第一重循环中,用wx:for-index保存categories的索引,第二种循环遍历post时,用这个索引来比较cat数组的catid和posd数组的id是否一致,大概如下:

    第一重:wx:for="{{categoriesList}}" wx:for-index="cat_idx"

    第二重:wx:for="{{postList}}"

    第二重循环里面判断两个变量相同则显示wx:if("categoriesList[cat_idx].id==postList[index].categories")

    2019-10-15
    有用
    回复
  • 九歌^
    九歌^
    2019-10-15

    写个代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html  你这个太乱了看不懂。

    2019-10-15
    有用
    回复
登录 后发表内容
问题标签