angular6实现对象转换数组对象
1 使用表单获取到数据以后,是对象类型的数据如下图

而后台需要返回的数据是这种key:value的形式传入

2 废话不多说直接上代码(代码只截取部分,仅供参考跑不起来,最后又一个小demo可以运行)
public discountArr = []; // 折扣数组容器
public discountContent = { 'name': '', 'value': '' }; // 折扣转换对象容器
public setDiscount = {}; // 折扣返回数据 ngOnInit() {
// 页面初始化发送请求获取数据折后
this.service.getProductDiscount(this.userId).subscribe(data => {
if (data.code !== 0) {
// TODO 错误处理
console.log(data.message);
} else {
返回成功后把获取到的数据赋值给页面的数据
console.log(data, '折扣');
this._discount.EIP = data.result.EIP;
this._discount.EBS = data.result.EBS;
this._discount.ECS = data.result.ECS;
this._discount.SLB = data.result.SLB;
this._discount.OSS = data.result.OSS;
this._discount.CPS = data.result.CPS;
this._discount.CAAS = data.result.CAAS;
this._discount.VPC = data.result.VPC;
this._discount.SBW = data.result.SBW;
this._discount.RDSMysql = data.result.RDSMysql;
this._discount.CDN = data.result.CDN;
}
});
// 表单获取到的数据
this.discount = this.fb.group({
EIP: [10, [Validators.required]],
EBS: [9, [Validators.required]],
ECS: [null, [Validators.required]],
SLB: [null, [Validators.required]],
OSS: [null, [Validators.required]],
CPS: [null, [Validators.required]],
CAAS: [null, [Validators.required]],
VPC: [null, [Validators.required]],
SBW: [null, [Validators.required]],
RDSMysql: [null, [Validators.required]],
CDN: [null, [Validators.required]],
});
console.log(this.discount.value);
}
// 表单提交执行函数
onSubmit() {
// tslint:disable-next-line:forin
// 循环表单获取的数据
for (const key in this.discount.value) {
// 每次执行行前让新对象为空
this.discountContent = { 'name': '', 'value': '' };
// 如果为空的话
if (!this.discountContent[key]) {
// 把拆分开的数据分别放入key value
this.discountContent.name = key;
this.discountContent.value = this.discount.value[key];
}
// 每次拆分成功插入数组
this.discountArr.push(this.discountContent);
}
// 转换成后台需要的数据格式
this.setDiscount = {
operatorId: this.marketId,
discount: this.discountArr,
};
console.log(this.setDiscount);
// 发送修改记录
this.service.changeProductDiscount(this.userId, this.setDiscount).subscribe(data => {
if (data.code != 0) {
// TODO 错误处理
this.notification.create(`error`, '失败',
data.message);
} else {
this.notification.create(`success`, '成功',
'折扣已修改成功');
}
});
}
3 数据转换 demo 示例 (这个可以跑)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> </body>
<script type="text/javascript">
var json = {
"CAAS":10,
"CDN": 10,
"CPS": 10,
"EBS": 10,
"ECS": 10,
"EIP": 10,
"OSS": 10,
"RDSMysql": 10,
"SBW": 10,
"SLB": 10,
"VPC": 10
};
var arr = [];
var json1= {};
for(let key in json){ json1 = {};
if(!json1[key]){
json1.name = key;
json1.value = json[key];
}
arr.push(json1);
}
console.log(arr);
</script>
</html>
angular6实现对象转换数组对象的更多相关文章
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- 什么是“类数组对象”,在jquer中怎样将类数组对象转换为数组对象
类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...
- javascript中的字符串对象和数组对象
1.javascript的对象的概念 在javascript中,除了null和undefined以处,其他的数据类型都被定义成了对象 也可以用创建对象的方法定义变量,string,math,array ...
- 微信小程序 - 对象转换成对象数组
后端传过来的一个个对象 {1,2,3,4},{1,3,5,},{1,3,5} 我们应该转化为数组对象 [{},{},{},{}] ,最后通过wx:for遍历到页面 示例图:
- js中的函数,Date对象,Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
- 学习笔记:javascript内置对象:数组对象
1.数组对象的创建 1.设置一个长度为0的数组 var myarr=new array(); 2.设置一个长度为n的数组 var myarr=new arr(n); 3.声明一个赋值的指定长度 ...
- math对象与数组对象
1.math对象 属性 //PI 圆周率 方法 //random 随机数 var num= Math.random(); 生成0到1的随机数//round 四舍五入var num2 ...
- js json对象和数组对象
动态添加json对象: var json = {}; json['a'] = 'a'; 动态添加数组对象: var arr = []; arr['a'] = 'a';
- JS对象 Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的
Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...
随机推荐
- java----判断闰年和平年
public class year{ public static void main(String[] args){ int year=2010; if((year%4==0&&yea ...
- Memory and Trident(CodeForces 712B)
Description Memory is performing a walk on the two-dimensional plane, starting at the origin. He is ...
- APP压力稳定性测试之monkey环境搭建
一.搭建adb环境: 需要的安装软件包可以使用我分享的,链接:https://pan.baidu.com/s/13DThDtc0GALabTakshcLfg 密码:0kuo:也可以自己百度下载 1)下 ...
- 第一章 Python基本语法
寒假不能荒废,终于静下心来认真地开始学习Python,在这里与大家分享一下所学知识,希望能对像我这样的小白有所帮助,如有错误之处,谢大佬不吝赐教!! 编程语言包括机器语言.汇编语言.高级语言.超 ...
- R语言预测实战(游浩麟)笔记2
特征构建技术 特征变换,对原始的某个特征通过一定的规则或映射得到新特征的方法,主要方法包括概念分层.标准化.离散化.函数变换以及深入表达.特征变换主要由人工完成,属于比较基础的特征构建方法. 概念分层 ...
- sorry
登录的时候密码忘了 重置了之后才登录上 这是有多久没登录了 好囧呀 近段时间学习Python也断断续续的 马上春节要到了 随后的20多天里 应该更没有时间学习了 想想都很忧伤 明明想很努力来着 但是总 ...
- yum安装的Nginx添加第三方模块支持tcp
需求:生产有个接口是通过socket通信.nginx1.9开始支持tcp层的转发,通过stream实现的,而socket也是基于tcp通信. 实现方法:Centos7.2下yum直接安装的nginx, ...
- mssqlserver超级班助类 带详细用法
using System; using System.Collections; using System.Collections.Generic; using System.Configuration ...
- windows 环境下mysql 重置密码解决方案
1.打开本地安装MySQL的安装目录,如:D:\software\mysql-5.7.20-winx64 进入bin目录,执行如下命令: mysqld -nt --skip-grant-tables ...
- myls
#include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <unist ...