微信小程序双重循环

看到这个后端返回给我的数据,一开始有点蒙,记录下怎么搞定的

上图是实现的效果图

//js代码
success: (res) => {
        if (res.code == 200) {
          var subjectArray = []
          for(var idx in res.data) {  
              var temp = {
                  subjectName: idx,
                  professionArray: res.data[idx]
              }
              subjectArray.push(temp)
          }    
          that.setData({
            bookList: subjectArray
          })
        }
      }

// subjectName这里代表前面的时间
// professionArray代表后面的数组内容(每一个菜)

下面是页面的代码

<view class="box">
    <view class="itemtoday"  wx:for="{{bookList}}" wx:key="index">
            <view class="top-time">{{item.subjectName}}</view>
                <view class="bottom-cook">
                    <view class="cookItem" bind:tap="showCook" wx:for="{{item.professionArray}}" wx:for-item="professionitem" wx:key="{{professionitem}}" data-id="{{professionitem.id}}" >
                        <image class="Img" src="{{professionitem.url}}" mode="aspectFill" lazy-load="false" binderror="" bindload="" />
                    <view class="left">{{professionitem.name}}</view>
                </view>
            </view>
    </view> 
</view>