js对象添加动态属性
1 let front_end = {} 2 let back_end = {}
2.使用ajax或则相关插件(axios, fetch等)请求API数据,这里略过直接拿到数据分别赋值给,
其实这里相当于实际项目中 ,请求api接口得到的res返回数据
1 let respone1 = { 2 code: 0, 3 status: 200, 4 title: 'web前端框架', 5 list: [ 6 { id: 1, name: 'React' }, 7 { id: 2, name: 'Vue' }, 8 { id: 3, name: 'Angular' } 9 ] 10 } 11 12 let respone2 = { 13 code: 0, 14 status: 200, 15 title: '后端框架', 16 list: [ 17 { id: 4, name: 'Laravel' }, 18 { id: 5, name: 'Django' }, 19 { id: 6, name: 'Flask' } 20 ] 21 }
3. 创建处理数据方法
function getList(res, key) {let temp= {} // 声明一个临时对象temp[key] = res.list // 将返回的数据赋值给对象的属性key console.log(temp) }
4.调用方法
1 getList(respone1, 'front_end') 2 getList(respone2, 'back_end')
得到的结果如下
到此,就可以使用和对象分别填充模板页面了。
总结:
1.这里使用对象的动态属性,绑定到指定的对象,
2.避免了同类型接口需要多个处理方法。
3.上述key值,必须和初始化的对象名相同,否则不能直接使用对象