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实现对象转换数组对象的更多相关文章

  1. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  2. 什么是“类数组对象”，在jquer中怎样将类数组对象转换为数组对象

    类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...

  3. javascript中的字符串对象和数组对象

    1.javascript的对象的概念 在javascript中,除了null和undefined以处,其他的数据类型都被定义成了对象 也可以用创建对象的方法定义变量,string,math,array ...

  4. 微信小程序 - 对象转换成对象数组

    后端传过来的一个个对象 {1,2,3,4},{1,3,5,},{1,3,5} 我们应该转化为数组对象 [{},{},{},{}]  ,最后通过wx:for遍历到页面 示例图:

  5. js中的函数，Date对象，Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

  6. 学习笔记：javascript内置对象：数组对象

    1.数组对象的创建   1.设置一个长度为0的数组  var myarr=new array(); 2.设置一个长度为n的数组  var myarr=new arr(n); 3.声明一个赋值的指定长度 ...

  7. math对象与数组对象

    1.math对象 属性 //PI    圆周率 方法 //random    随机数 var num= Math.random();    生成0到1的随机数//round 四舍五入var num2 ...

  8. js json对象和数组对象

    动态添加json对象: var json = {}; json['a'] = 'a'; 动态添加数组对象: var arr = []; arr['a'] = 'a';

  9. JS对象 Array 数组对象 数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的

    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...

随机推荐

  1. django数据库的表已迁移的不能重新迁移的解决办法

    django.db.utils.InternalError: (1050, "Table 'tb_content' already exists") mysql数据库在迁移时数据库 ...

  2. linux 虚拟机配置固定ip

    参考这边博客: https://blog.csdn.net/u014466635/article/details/80284792 但是这个有个小问题,就是没有配置dns,导致连不上公网 /etc/s ...

  3. Python类之类的成员

    对于一个学C++的朋友来说,Python类中,哪些是私有成员,哪些是共有成员,估计一直傻傻分不清. 一.本篇博客要解决的问题: Python类中,哪些是私有成员?哪些是共有成员? 二. 关于Pytho ...

  4. 记录PHP的执行时间

    网上不少误导信息,实际上这个答案在PHP源码中的Zend文件夹下bench.php是有的 在此纠正下网络上复制粘贴造成的错误.希望后来人少踩点坑. function getmicrotime() { ...

  5. 一款堪称完美的编程字体Source Code Pro

    对于程序员来说,好的字体应该满足的基本条件: 字母和数字易于分辨,如: 英文字母o 和 阿拉伯数字 0 ,或者 英文字母 l 和 阿拉伯数字 1 ,两个单引号 '' 和双引号 ”. 字体等宽,保持对齐 ...

  6. 【webpack学习笔记】a04-建立开发环境

    开发环境就是在开发过程中为了方便配置的环境,生产环境就是开发完成即将上线的情况. 好了,说了句废话,切入正题. 在开发时,打包后的文件压缩成一团,报错调试的时候傻眼了有木有?每次做出修改需要到浏览器查 ...

  7. python基础之作业3----三级菜单小练习

    data = { "华为技术":{ "产品与解决方案":{ "云核心网":{"云核心网研发管理部","云核心网 ...

  8. hibernate 保存的flush怎么用？

    hibernate 中的flush方法只有在上面的数据保存用了hibernate的方法保存了,但是在同一个事物当中需要用SQL的方法去查上面保存的数据,这个时候上方的hibernate保存后面就需要用 ...

  9. 1.3 SQL循环

    1.while循环(1~20的和) 2.while_break_continue(1~20偶数和) 3.if选择象限 4.return:在查询中无条件退出,return后面的语句将不会被执行. 5.g ...

  10. require的特点

    通过把要加载的文件看作一个“功能”而不是一个文件,require对于用Ruby编写的扩展和用C语言编写的扩展都用一样的方式.另外,.rb扩展名的文件与其它扩展名为.so..dll或.bundle的文件 ...