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. PPT母版制作

    选择母版 首先,去iSlide官网下载iSlide,下载iSlide后,power point的菜单栏会自动出现iSilde图标(如下图). 打开iSlide这一栏,点击“图示库”,会弹出一个窗口,就 ...

  2. Java实现post和get请求

    GET请求:GET请求会向服务器发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行 ...

  3. SQL-53 按照dept_no进行汇总，属于同一个部门的emp_no按照逗号进行连接，结果给出dept_no以及连接出的结果employees

    题目描述 按照dept_no进行汇总,属于同一个部门的emp_no按照逗号进行连接,结果给出dept_no以及连接出的结果employeesCREATE TABLE `dept_emp` (`emp_ ...

  4. Asp .Net Core Spa (一) - 入门

    第一次写文章, 很久之前就想写来着了, 文章哪里不清楚的, 也请多多提出意见. 最近发现用 .net core + spa (single page application) 这个组合的人也变多了, ...

  5. SSM excel文件的导入导出

    对于excel文件的导入导出,后台接收读取和建表封存都是固定死的,所以对于excel导入时,excel文件内容必须匹配后台相关对象,不然报错. excel文件导出,用<a><a/&g ...

  6. Problem 3: Largest prime factor

    The prime factors of 13195 are 5, 7, 13 and 29. What is the largest prime factor of the number 60085 ...

  7. html5滑动事件代码

    $(".header").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { ...

  8. Number and String in JS

    Number 整数 小数(浮点数) 小数参与运算 NaN 其他数据类型转换成数字 String 其他数据类型转换成字符串 Number.Boolean.String的相同点     Number 虽然 ...

  9. 关于MySQL5.7 这几天的总结(json类型)

    一开始,老板让调整一下 innodb_buffer_pool_size 大小,因为这台机器内存大. 看了下内存,16G,再SQL下面命令,得到结果是4G. SELECT @@innodb_buffer ...

  10. 【转】Android-Input 触摸设备

    https://source.android.com/devices/input/touch-devices 触摸设备 Android 支持各种触摸屏和触摸板,包括基于触控笔的数字化板. 触摸屏是与显 ...