如何在 Angular 的自定义结构中创建具有自定义结构的 JSON 数据

Posted 2023-02-15

【中文标题】如何在 Angular 的自定义结构中创建具有自定义结构的 JSON 数据

【英文标题】：How to create JSON data with custom structure in a custom structure in Angular

【发布时间】：2021-06-09 10:59:37

【问题描述】：

用例：我需要从 Angular 中的 formData 动态创建具有以下结构的 JSON 数据。

必需的 JSON 结构

        "variables": 
            "phone": 
                "value": "1234567890",
                "type": "String"
            ,
            "email": 
                "value": "9876543210",
                "type": "String"
            
        
    

到目前为止，我已经设法创建了这样的东西。

    
    "variables": 
        "phone": 
            "value": "1234567890",
            "type": "String"
        
    

使用此代码：

    this.parametres = ;
    var element = ;
    Object.keys(this.sampleForm.controls).forEach(key => 
        console.log(key + " -- " + this.sampleForm.get(key).value);

        element = 
            [key]: 
                "value": this.sampleForm.value[key],
                "type": "String"
            ,
        
    );

    this.parametres = 
        variables: 
            ...element
        
    

如何在变量中添加更多元素： 比如所需的 JSON 结构？

我尝试将元素创建为数组，但在参数中留下了索引号。

【问题讨论】：

您正在覆盖element。尝试更新它。喜欢element[key] = ..

【参考方案1】：

你可以使用 reduce 这样的方法来代替 forEach

const parameters = Object.keys(this.sampleForm.value).reduce((prev,curr)=>
   prev[curr] =  
      value: this.sampleForm.value[curr],
      type: typeof this.sampleForm.value[curr] // not sure about that.
    
   return prev;
, )

【讨论】：

是的。这也有效。不得不稍微调整一下。将其包装在变量中： ...parameters

使用 reduce 代替 forEach 有什么大的不同吗？

forEach 只会循环遍历元素，reduce 使您能够合并每次迭代的结果并返回合并后的结果。但这仍然取决于您的使用情况。

好的，很好。感谢您的信息