js对象添加动态属性
在业务中,经常会遇到使用同个方法调用多个同类型接口,以下简单模拟两个API接口
// api-1
{
code: 0,
status: 200,
title: 'web前端框架',
list: [
{id: 1, name: 'React'},
{id: 2, name: 'Vue'},
{id: 3, name: 'Angular'}
]
} // api-2 {
code: 0,
status: 200,
title: '后端框架',
list: [
{id: 4, name: 'Laravel'},
{id: 5, name: 'Django'},
{id: 6, name: 'Flask'}
]
}
前端请求
1. 声明接收数据的空对象
let front_end = {}
let back_end = {}
2. 使用ajax或则相关插件(axios, fetch等)请求API数据, 这里略过直接拿到数据分别赋值给response1, response2
其实这里相当于实际项目中 ,请求api接口得到的res返回数据
let respone1 = {
code: 0,
status: 200,
title: 'web前端框架',
list: [
{ id: 1, name: 'React' },
{ id: 2, name: 'Vue' },
{ id: 3, name: 'Angular' }
]
} let respone2 = {
code: 0,
status: 200,
title: '后端框架',
list: [
{ id: 4, name: 'Laravel' },
{ id: 5, name: 'Django' },
{ id: 6, name: 'Flask' }
]
}
3. 创建处理数据方法
function getList(res, key) {
let temp= {} // 声明一个临时对象
temp[key] = res.list // 将返回的数据赋值给对象的属性key
console.log(temp)
}
4. 调用方法
getList(respone1, 'front_end')
getList(respone2, 'back_end')
得到的结果如下
到此,就可以使用front_end和back_end对象分别填充模板页面 了。
总结:
1. 这里使用javascript对象的动态属性, 绑定到指定的对象,
2. 避免了同类型接口需要多个处理方法。
3. 上述key值,必须和初始化的对象名相同,否则不能直接使用对象
js对象添加动态属性的更多相关文章
- 一道面试题关于js中添加动态属性
js中数据类型包含基本数据类型和引用类型,基本类型包括:string.null.undefined.number.boolean.引用类型即是对象比如:array .function以及自定义对象等 ...
- JS对象添加新的字段
var test={name:"name",age:"12"}; test.id = "12345"; 直接定义添加就成了
- 向JS对象添加和删除事件
this.removeEventListener = function (obj, ename, func) { var store = obj[this.addEventListener.pre + ...
- Js 对象添加属性
var arr = new Array(); arr[0] = jQuery("#data1").val(); var obj = {}; obj.y='abc'; arr.pus ...
- 关于js对象添加属性
字符串类型的(注意要加引号): var obj={}; for(var i=0;i<10;i++){ eval("obj.key"+i+"='"+&quo ...
- js对象中动态读取属性值 动态属性值 js正则表达式全局替换
$(document).ready(function(){ var exceptionMsg = '${exception.message }'; var exceptionstr = ''; //j ...
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- js 为对象添加和删除属性
对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...
- 在js中为对象添加和删除属性
对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...
随机推荐
- 【ML入门系列】(一)训练集、测试集和验证集
训练集.验证集和测试集这三个名词在机器学习领域极其常见,但很多人并不是特别清楚,尤其是后两个经常被人混用. 在有监督(supervise)的机器学习中,数据集常被分成2~3个,即:训练集(train ...
- QT系统托盘应用程序
在QT中QSystemTrayIcon类提供了创建系统托盘程序的功能. QSystemTrayIcon类为系统托盘中的应用程序提供图标.现代操作系统通常会在桌面上提供一个称为系统托盘(system t ...
- C# SQLite数据库
在客户端配置文件<configuration>节点下,添加: <connectionStrings> <add name="localdb" conn ...
- 【Dubbo 源码解析】08_Dubbo与Spring结合
Dubbo 与 Spring 结合 基于 dubbo.jar 内的 META-INF/spring.handlers 配置,Spring 在遇到 dubbo 名称空间时,会回调 DubboNamesp ...
- Inside The C++ Object Model(三)
============================================================================3-0. 类所占的内存大小受到三个因素的影响:( ...
- Spring框架介绍及使用
Spring框架—控制反转(IOC)1 Spring框架概述1.1 什么是Spring1.2 Spring的优点1.3 Spring的体系结构2 入门案例:(IoC)2.1导入jar包2.2目标类2. ...
- 最强Android书 架构大剖析 作者网站
http://newandroidbook.com/ jonathan levin (最强Android书 架构大剖析) http://newandroidbook.com/AIvI-M-R ...
- php算法题
一群猴子排成一圈,按1,2,…,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去…,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就叫做大 ...
- JBPM工作流(五)——执行流程实例
概念: ProcessInstance,流程实例:代表流程定义的一次执行.如:张三昨天按请假流程请了一次假.一个流程实例包括了所有运行阶段,其中最典型的属性就是跟踪当前节点的指针,如下图. Execu ...
- mybatis03--字段名和属性名不一致
1.修改数据库中的字段 2.运行根据id查询所有的学生信息的测试方法会出现下面的异常 也就是说明 数据库中的字段没有个实体类中的属性名一致 3.修改StudentMapper.xml文件中的列名 4. ...