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. 为虚机Linux系统设置静态IP，ping通外网并解决相关问题

    在虚机中安装完Linux系统后,虚机是ping不通外网的,而默认的动态IP会为之后的Hadoop应用造成不少麻烦,为了减少这些不必要的麻烦,我们把系统的IP设置为静态. 步骤: 修改系统配置文件 命令 ...

  2. python os.walk()遍历文件夹

    转自 http://alanland.iteye.com/blog/612459 via @alanland 今天第一次进行 文件遍历,自己递归写的时候还调试了好久,(主要因为分隔符号的问题),后来发 ...

  3. Linux 文件系统(一)---虚拟文件系统VFS----超级块、inode、dentry、file

    转自:http://blog.csdn.net/shanshanpt/article/details/38943731 http://elixir.free-electrons.com/linux/v ...

  4. js之 单例模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. browser_action' is only allowed for extensions but this is a legacy packaged app

    manifest.json中不可包含调试代码:    "app": {     "launch": {      "local_path": ...

  6. python网络基础_socket

    利用基本的Socket 通信,模仿远程cmd命令: Server import socket sk = socket.socket() sk.bind(('127.0.0.1',8090)) sk.l ...

  7. 18-09-16如何从pychram的第三方包导入设计器

    1 在pychrm 中的操作 2 找到pycharm 中找到对应的包 3 找到设计器中文件夹 后进行复制即可

  8. Holer实现外网访问本地MySQL数据库

    外网访问内网MySQL数据库 内网主机上安装了MySQL数据库,只能在局域网内访问,怎样从公网也能访问本地MySQL数据库? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装并启 ...

  9. 树莓派外网ssh访问holer实现篇

    外网ssh访问树莓派 内网的树莓派(Raspberry Pi),只能在局域网内访问,怎样从公网也能ssh登录访问树莓派? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装并启动树 ...

  10. axis调用Web服务报axis unexpected wrapper element{XXXX}XXX错误的解决

    使用axis调用WebService时报错:axis unexpected wrapper element{XXXX}YYY .... expected {XXXX}. 经查,XXXX为wsdl文件中 ...