在业务中,经常会遇到使用同个方法调用多个同类型接口,以下简单模拟两个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对象添加动态属性的更多相关文章

  1. 一道面试题关于js中添加动态属性

    js中数据类型包含基本数据类型和引用类型,基本类型包括:string.null.undefined.number.boolean.引用类型即是对象比如:array  .function以及自定义对象等 ...

  2. JS对象添加新的字段

    var test={name:"name",age:"12"}; test.id = "12345"; 直接定义添加就成了

  3. 向JS对象添加和删除事件

    this.removeEventListener = function (obj, ename, func) { var store = obj[this.addEventListener.pre + ...

  4. Js 对象添加属性

    var arr = new Array(); arr[0] = jQuery("#data1").val(); var obj = {}; obj.y='abc'; arr.pus ...

  5. 关于js对象添加属性

    字符串类型的(注意要加引号): var obj={}; for(var i=0;i<10;i++){ eval("obj.key"+i+"='"+&quo ...

  6. js对象中动态读取属性值 动态属性值 js正则表达式全局替换

    $(document).ready(function(){ var exceptionMsg = '${exception.message }'; var exceptionstr = ''; //j ...

  7. js中 给json对象添加属性和json数组添加元素

    js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...

  8. js 为对象添加和删除属性

    对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...

  9. 在js中为对象添加和删除属性

    对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...

随机推荐

  1. 【ML入门系列】(一)训练集、测试集和验证集

    训练集.验证集和测试集这三个名词在机器学习领域极其常见,但很多人并不是特别清楚,尤其是后两个经常被人混用. 在有监督(supervise)的机器学习中,数据集常被分成2~3个,即:训练集(train ...

  2. QT系统托盘应用程序

    在QT中QSystemTrayIcon类提供了创建系统托盘程序的功能. QSystemTrayIcon类为系统托盘中的应用程序提供图标.现代操作系统通常会在桌面上提供一个称为系统托盘(system t ...

  3. C# SQLite数据库

    在客户端配置文件<configuration>节点下,添加: <connectionStrings> <add name="localdb" conn ...

  4. 【Dubbo 源码解析】08_Dubbo与Spring结合

    Dubbo 与 Spring 结合 基于 dubbo.jar 内的 META-INF/spring.handlers 配置,Spring 在遇到 dubbo 名称空间时,会回调 DubboNamesp ...

  5. Inside The C++ Object Model(三)

    ============================================================================3-0. 类所占的内存大小受到三个因素的影响:( ...

  6. Spring框架介绍及使用

    Spring框架—控制反转(IOC)1 Spring框架概述1.1 什么是Spring1.2 Spring的优点1.3 Spring的体系结构2 入门案例:(IoC)2.1导入jar包2.2目标类2. ...

  7. 最强Android书 架构大剖析 作者网站

    http://newandroidbook.com/    jonathan levin   (最强Android书 架构大剖析) http://newandroidbook.com/AIvI-M-R ...

  8. php算法题

    一群猴子排成一圈,按1,2,…,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去…,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就叫做大 ...

  9. JBPM工作流(五)——执行流程实例

    概念: ProcessInstance,流程实例:代表流程定义的一次执行.如:张三昨天按请假流程请了一次假.一个流程实例包括了所有运行阶段,其中最典型的属性就是跟踪当前节点的指针,如下图. Execu ...

  10. mybatis03--字段名和属性名不一致

    1.修改数据库中的字段 2.运行根据id查询所有的学生信息的测试方法会出现下面的异常 也就是说明 数据库中的字段没有个实体类中的属性名一致 3.修改StudentMapper.xml文件中的列名 4. ...