[Fixed] iterating through json object Typescript

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);
    }
  }
}

Leave a Reply

(*) Required, Your email will not be published