微信小程序循环数据，各种数据类型

本篇是介绍大致会出现的循环数据结构类型，有更深层次的可以单独取出来进行循环处理
废话不多说，上代码：
index.wxml

<view class="page">
  <view class="title">各种循环</view>
  <!-- 第一种 -->
  <view class="one">
      <view wx:for="{{arr}}">{{item}}</view>
  </view>
  <!-- 第二种 -->
  <view class="two">
      <view wx:for="{{arr2}}" wx:key="index">{{item.name}}今年{{item.age}}岁</view>
  </view>
  <!-- 第三种 -->
  <view class="three">
      <view wx:for="{{arr3}}" wx:key="index">{{item.name}}今年{{item.age}}岁，出差过
      <text wx:for="{{item.address}}" wx:for-item="address" wx:key="{{address}}">{{address.ly}}</text>
      </view>
  </view>
  <!-- 第四种 -->
  <view class="four">
    <view wx:for="{{arr4}}" wx:key="index">{{item.name}}今年{{item.age}}岁，
      <text>{{item.userinfo.ff == 0 ? '未婚': '已婚'}}</text>
      <text>{{item.userinfo.sg}}cm</text>在
      <text wx:for="{{item.address}}" wx:for-item="address" wx:key="{{address}}">{{address.ly}}</text>工作过
    </view>
  </view>
</view>

index.wxss

.page{
    padding: 0 20rpx;
}

.title{
    font-weight: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 88rpx;
}
.one,.two,.three,.four{
    font-weight: 28rpx;
    line-height: 56rpx;
    background-color: rgb(142, 194, 255);
    margin-bottom: 30rpx;
}

index.js

Page({
  data: {
    arr:['张三','李四','赵五'],
    arr2: [
      {name:'张三',age: 20},
      {name:'李四',age: 21},
      {name:'赵五',age: 22}
    ],
    arr3: [
      {name:'张三',age: 20,address:[
        {ly:'湖北省'},
        {ly:'河南省'}
      ]},
      {name:'李四',age: 21,address:[
        {ly:'山东省'},
        {ly:'河南省'}
      ]},
      {name:'赵五',age: 22,address:[
        {ly:'浙江省'},
        {ly:'河南省'}
      ]}
    ],
    arr4: [
      {name:'张三',age: 20,userinfo:{
        ff:0,
        sg:180
      },address:[
        {ly:'北京'},
      ]},
      {name:'李四',age: 21,userinfo:{
        ff:0,
        sg:178
      },address:[
        {ly:'上海'},
      ]},
      {name:'赵五',age: 22,userinfo:{
        ff:0,
        sg:168
      },address:[
        {ly:'浙江'},
      ]}
    ],
  },
  
})

展示示例：

笔记二：

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

上图是实现的效果图

//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>