[英]How to map values from nested Typescript object to properties of JSON object
在我正在进行的一个项目中,我们使用正式调用的Angular库来动态创建我们的 forms。
目前,表单配置被硬编码为 Typescript object 称为mockForm
。 除了type
属性等于'select'
的对象中的options
属性之外, mockForm
中的所有属性都是硬编码的:
模拟表格
export const mockForm = {
name: 'root',
subSections: [
{
name: 'Client',
subSections: [
{
name: 'Contact Information'
},
{
name: 'Insurance Information'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'fieldA1',
type: 'input',
templateOptions: {
label: 'A1',
required: true
}
},
{
key: 'fieldA2',
type: 'select',
templateOptions: {
label: 'A2',
required: true,
options: []
}
}
]
},
{
name: 'Overview - B',
fields: [
{
key: 'fieldB1',
type: 'input',
templateOptions: {
label: 'B1',
required: false
}
},
{
key: 'fieldB2',
type: 'select',
templateOptions: {
label: 'B2',
required: false,
options: []
}
}
]
}
]
}
]
}
]
};
我想使用调用的 API 填充options
属性,它返回以下 object:
API 返回
{
"multi_value_fields": {
"fieldA2": [
"froodian@outlook.com",
"gastown@sbcglobal.net",
"dgriffith@me.com",
"maradine@live.com",
"samavati@icloud.com",
"naupa@comcast.net"
],
"fieldB2": [
"<3m",
"<6m",
"<9m",
"<12m",
"+12m",
"N/A"
]
}
}
从 API 调用返回的 object 返回一个 JSON ,其属性是来自mockForm
的key
,其属性type
等于'select'
; 这些 JSON 属性的值表示表单的下拉选项。
预期结果应如下所示:
export const mockForm = {
name: 'root',
subSections: [
{
name: 'Client',
subSections: [
{
name: 'Contact Information'
},
{
name: 'Insurance Information'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'fieldA1',
type: 'input',
templateOptions: {
label: 'A1',
required: true
}
},
{
key: 'fieldA2',
type: 'select',
templateOptions: {
label: 'A2',
required: true,
options: [
"froodian@outlook.com",
"gastown@sbcglobal.net",
"dgriffith@me.com",
"maradine@live.com",
"samavati@icloud.com",
"naupa@comcast.net"
]
}
}
]
},
{
name: 'Overview - B',
fields: [
{
key: 'fieldB1',
type: 'input',
templateOptions: {
label: 'B1',
required: false
}
},
{
key: 'fieldB2',
type: 'select',
templateOptions: {
label: 'B2',
required: false,
options: [
"<3m",
"<6m",
"<9m",
"<12m",
"+12m",
"N/A"
]
}
}
]
}
]
}
]
}
]
};
我没有经历过这样的场景,我不太确定如何解决这个问题(我应该从 JSON 属性和 map 回到mockForm
吗?我需要手动迭代mockForm
以便从API 调用?)
你的 JSON mockForm非常典型。 如果它保持不变,那么您必须手动迭代底部叶子,即mokeForm.subSections[1].subSections
然后循环到那里以匹配label & type 。
否则,您需要编写遍历整个 mokeForm JSON 的解析并分配所需的选项是各自的地方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.