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实现对象转换数组对象的详细内容...