從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,
// 創(chuàng)建數組,稍后將內容轉移至數組
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)
})
}
在頁面使用雙重循環(huán)贯溅，就能夠渲染出分類的效果
<div v-for="(value,key) in handleObj">{{value.comingTitle}}
<div v-for="(item,index) in value.items">{{item.nm}}</div>
