前端页面显示问题！！！

[武小凡]

如图：后端数据传过来的数据为List<Map>，前端页面如何根据YUNDONGLEIXING字段和LIANXILEIXING字段来分组显示LIANXIMINGCHENG字段？？？

[丰云]

list数据可以过滤或分组撒
这哪有一点难度可言撒。。。。

唉。。。。

[武小凡]

引用 1 楼 foren_whb 的回复:

list数据可以过滤或分组撒
这哪有一点难度可言撒。。。。

唉。。。。

怎么弄？前端小白啦！

[fqydzyy]

写个函数改变下数据结构，将一个组内的运动放在该类目的children属性里面（例如将上下台阶、快步走的活动放在走跑运动的children属性里面），然后直接遍历新数据（map方法）就好了

[武小凡]

引用 3 楼 fengqingyundan0606 的回复:

写个函数改变下数据结构，将一个组内的运动放在该类目的children属性里面（例如将上下台阶、快步走的活动放在走跑运动的children属性里面），然后直接遍历新数据（map方法）就好了

具体啊！

[qingkooo]

首先要知道，这个list是不能在模版中遍历出dom的，先要format为以下数据格式：

list = [
{
id=1,
name='有氧运动',
content:[
{
id:1,
name:'上下台阶运动',
value:0 // 0未选择，1已选
},
...
]
},
...
]

我想你有这个目标数据格式后，你就心中有数了吧

然后拿着这个list去模版中渲染即可，比如vue

<ul>
<li v-for=(item,index) in list>
<h3>{{item.name}}</h3>
<ol>
<li v-for=(itm,idx) in item.content>
<label>
<span>{{itm.name}}</span>
<input type='checkbox' v-model="itm.value">
</label>
</li>
</ol>
</li>
</ul>

祝顺利