从ajax请求回来的数据，经常是没有进行分类的，但是有时候需要进行分类，就必须做一件事，那就是洗数据
经过洗数据之后组件能够分类显示
在洗数据的时候，需要把数据结构进行改造，以方便组件在页面的渲染
{
[
{
comingTitle:"11月1日 周四"，
items：[{...},{...},...]
},
{
comingTitle:"11月2日 周五"，
items：[{...},{...},...]
}
]
}
这种结构里面嵌套了两层数组，很显然这并不适合组件的渲染，需要将结构再次改造
{
11月1日 周四:{
comingTitle:"11月1日 周四"，
items：[{...},{...},...]
},
11月2日 周五:{
comingTitle:"11月2日 周五"，
items：[{...},{...},...]
}
}
这种结构相对起来就清晰很多，因此以下代码就会实现这种结构
在mounted钩子里面定义一个处理数据的内部函数
_handleList(coming){
// console.log(coming);
var obj={}
coming.forEach((el)=>{
// 属性名默认为undefined,取反成为布尔值就变成true
if(!obj[el.comingTitle]){
// 将日期赋值给对象的键名
obj[el.comingTitle]={
comingTitle:el.comingTitle,
// 创建数组,稍后将内容转移至数组
items:[]
}
}
// 将内容转移至数组
obj[el.comingTitle].items.push(el)
})
// console.log(obj)
// 组件内定义好的对象名指向完成的对象
this.handleObj=obj;
console.log(obj)
}
处理获取下来的数据
_initData(baseUrl){
return new Promise((resolve,reject)=>{
var xhr = new XMLHttpRequest();
xhr.open("GET",baseUrl);
xhr.send();
xhr.addEventListener("readystatechange",function(){
if(xhr.readyState==4){
if(xhr.status==200){
resolve(xhr.response);
}
}
})
}).then((res)=>{
this.list=JSON.parse(res).movieList;
// this.comingTitle=this.list[0].comingTitle;
this._handleList(this.list)
})
}
在页面使用双重循环，就能够渲染出分类的效果
<div v-for="(value,key) in handleObj">{{value.comingTitle}}
<div v-for="(item,index) in value.items">{{item.nm}}</div>
