小程序对接口返回带有二级循环的数据解析

-

1. 带有两个分级的数据接口是指每一级的一级循环都有对应的二级循环。

PHP接口数据示例：

                $new_res[] = [ // 一级分类
                    'phrase_class_id'=> $the_phrase_class_id,
                    'phrase_class_name'=> $the_phrase_class_name,
                    'phrase_info'=> $the_phrase_info, // 二级分类的键
                ];

wxml：

一级分类数据渲染前缀wx:for-item="one"，

二级分类数据渲染前缀wx:key="*this" wx:for-item="two"，

 <view class="w-item" wx:for="{{phrase_class_list}}" wx:key="*this" wx:for-item="one">
    <view class="w-list-title font-title">{{one.phrase_class_name}}</view>
    <view class="p-list-view">
      <!--  -->
      <view class="p-list-item click" data-phrase_class_id="{{one.phrase_class_id}}" data-phrase_info_id="{{two.phrase_info_id}}" data-phrase_class_name="{{one.phrase_class_name}}"  data-phrase_info_name="{{two.phrase_info_name}}" wx:for="{{one.phrase_info}}" bindtap="phrase_info_detail" wx:key="*this" wx:for-item="two">
        <view class="p-list-title font-text">《{{two.phrase_info_name}}》</view>
        <!-- <view class="p-list-summary font-mini">{{two.phrase_info_summary}}</view> -->
        <view class="p-list-summary ">
          <rich-text class="font-mini" nodes="{{two.phrase_info_summary}}"></rich-text>
        </view>
        <view class="clear"></view>
      </view>

    </view>
    <view class="clear"></view>
  </view>

js：

let phrase_class_list = res.data.content;

that.setData({
     phrase_class_list: phrase_class_list,
})

-

效果：

-