Issue
I’m having a really hard time trying to find a way to iterate through this JSON object in the way that I’d like. I’m using only Typescript here.
First, here’s the object
date1: {enabled: false, label: "Date1 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 20}
date2: {enabled: false, label: "Date2 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 21}
date3: {enabled: false, label: "Date3 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 22}
date4: {enabled: false, label: "Date4 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 23}
date5: {enabled: false, label: "Date5 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 24}
dropdown1: {enabled: true, label: "Country", eformVisible: false, mandatory: "NOT_MANDATORY", order: 30, …}
dropdown2: {enabled: false, label: "Dropdown2 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 31,}
dropdown3: {enabled: false, label: "Dropdown3 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 32, }
dropdown4: {enabled: false, label: "Dropdown4 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 33,}
dropdown5: {enabled: false, label: "Dropdown5 Label", eformVisible: false, mandatory: "NOT_MANDATORY", order: 34,}
I did loop through the object. and now add need to bind data to html elements based on text or dropdown enabled true value how can I use ngfor loop foreach textbox and dropdown which don’t have same index . I like to do exactly patch form .
so I’m not sure where to go from here.
Solution
You can use the for...of
syntax in combination with Object.entries()
to achieve this.
const options = {
"text1": {
"enabled": true,
},
"text2": {
"enabled": false,
},
"dropdown1": {
"enabled": true,
},
"dropdown2": {
"enabled": false,
},
"dropdown3": {
"enabled": false,
},
};
for ([key, value] of Object.entries(options)) {
if (value.enabled) {
if (key.startsWith('text')) {
console.log('enable text', key);
} else if (key.startsWith('dropdown')) {
console.log('enable dropdown', key);
}
}
}