[英]How to map values from nested Typescript object to properties of JSON object
In a project that I'm working on, we're using the Angular library called formly to create our forms dynamically.在我正在进行的一个项目中,我们使用正式调用的Angular库来动态创建我们的 forms。
Currently, the form configuration is hardcoded as a Typescript object called mockForm
.目前,表单配置被硬编码为 Typescript object 称为
mockForm
。 All of the properties in mockForm
are hardcoded besides the options
property in objects whose type
property equals 'select'
:除了
type
属性等于'select'
的对象中的options
属性之外, mockForm
中的所有属性都是硬编码的:
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: []
}
}
]
}
]
}
]
}
]
};
I would like to populate the options
property by using an API called which returns the following object:我想使用调用的 API 填充
options
属性,它返回以下 object:
API return 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"
]
}
}
The object returned from the API call returns a JSON whose properties are the key
values from mockForm
whose property type
equals 'select'
;从 API 调用返回的 object 返回一个 JSON ,其属性是来自
mockForm
的key
,其属性type
等于'select'
; and the values of these JSON properties represent the dropdown options of the form.这些 JSON 属性的值表示表单的下拉选项。
The intended outcome should be the following:预期结果应如下所示:
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"
]
}
}
]
}
]
}
]
}
]
};
I haven't experienced a scenario like this, and I'm not so sure on how to approach this (Should I start with the JSON properties and map back to mockForm
? Would I need to manually iterate through mockForm
in order to populate from the API call?)我没有经历过这样的场景,我不太确定如何解决这个问题(我应该从 JSON 属性和 map 回到
mockForm
吗?我需要手动迭代mockForm
以便从API 调用?)
your JSON mockForm is very typical.你的 JSON mockForm非常典型。 If it remains the same then you must manually iterate over the bottom leaf ie,
mokeForm.subSections[1].subSections
and then loop there to match the label & type .如果它保持不变,那么您必须手动迭代底部叶子,即
mokeForm.subSections[1].subSections
然后循环到那里以匹配label & type 。
Otherwise, you need to write parse which iterates all over mokeForm JSON & assign required options are respective places.否则,您需要编写遍历整个 mokeForm JSON 的解析并分配所需的选项是各自的地方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.