• 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>
  • 相关阅读:
    org.json里实现XML和JSON之间对象互转
    Rhino-- JavaScript
    XStream -- a simple library to serialize objects to XML and back again
    [Groovy]转:Groovy 通过 isCase 方法进行分类
    [Groovy]static typing
    JavaScript Succinctly 读后笔记
    [Groovy] Private fields and methods are not private in groovy
    Android 学习之路和App开发框架
    Android自定义xml解析
    Android 动态生成对话框和EditText
  • 原文地址:https://www.cnblogs.com/zxbky/p/10036841.html
Copyright © 2020-2023  润新知