洗数据

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