VUE中后端定义的数据结构与前端展示数据结构转换

2020-07-24 12:07:36 执剑追风 74 前端开发 / VUE

应用场景:后端给前端返回数据的时候,如后端返回一个多层级数据结构,前端需要解构出多层数据,然后展示到页面中。

后端返回的JSON数据中含有多层级数据,则需要在前端进行解构赋值,并提取需要的字段展示到页面中


//定义接收对象:

table = {}


//获取接口返回JSON数据,赋给 items

items = res.data;


//调用对象解构方法

table = this.formatTable(items);


//定义解构方法

formatTable(items){

let {字段1,字段2,字段3........字段N } = items;

      let item = {字段1,字段2,字段3.....

        字段4(二层对象中):items.二层对象.二层字段1,

字段5(二层对象中):items.二层对象.二层字段2,

      };

      return item;

}


总结:通过解构函数提取需要用到的字段和解出JSON对象中含有层级的字段