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. JS中的作用域（一）-详谈

    本篇文章在于详细解读JavaScript的作用域,从底层原理来解释一些常见的问题,例如变量提升.隐式创建变量等问题,在和大家一起交流进步的同时,也算对自己知识掌握的记录,方便以后复习 首先,直接捡干的 ...

  2. win10电脑安装win7

    1.进入BIOS,关闭“Secure Boot”功能,启用传统的“Legacy Boot”.预装WIN8的系统想要更换WIN7系统首先需要修改BIOS设置.BIOS设置方法:F2进入BIOS,选择se ...

  3. [Codeforces375E]Red and Black Tree

    Problem 给定一棵有边权的树.树上每个点是黑或白的.黑白点能两两交换. 求符合任意一个白点到最近黑点的距离小于等于x时,黑白点交换次数最少为多少. Solution 明显是一题树形DP.我们先跑 ...

  4. 常用类-API文档-Integer

    package IntegerTest;import java.util.Base64.Decoder; public class test01 { /** * 包装类的基本数据类型 * int =& ...

  5. Android 偏门xml属性

    在 recycleView listview scroview 等等 活动的时候会出现蓝边 android:overScrollMode="never" 用次属性可以去掉 fadi ...

  6. sklearn-adaboost

    sklearn中实现了adaboost分类和回归,即AdaBoostClassifier和AdaBoostRegressor, AdaBoostClassifier 实现了两种方法,即 SAMME 和 ...

  7. spring的历史和设计科学

    Spring的起源 要谈Spring的历史,就要先谈J2EE.J2EE应用程序的广泛实现是在1999年和2000年开始的,它的出现带来了诸如事务管理之类的核心中间层概念的标准化,但是在实践中并没有获得 ...

  8. dubbo入门学习笔记之环境准备

    粗略的学完springcloud后由于公司的项目有用到一点dubbo,刚好手头上又有dubbo的学习资料,于是趁机相对系统的学了下duboo框架,今天开始记录下我的所学所悟;说来惭愧,今年之前,作为一 ...

  9. 简单gitblit与Jenkins结合，持续集成

    gitblit是当作git服务器,也就是作为私有的代码仓库,用法类似于Github Jenkins 是自动构建工具,帮忙将仓库中的代码更新到服务器上.可以设置为定时自动构建. 详细摸索了我现在公司的用 ...

  10. nginx——优化 Nginx 连接超时时间

    1. 什么是连接超时 (1) 举个例子,某饭店请了服务员招待顾客,但是现在饭店不景气,因此要解雇掉一些服务员,这里的服务员就相当于 Nginx 服务建立的连接 (2) 当服务器建立的连接没有接收处理请 ...