CODEWITHSUNDEEP
jsonangulartypescript
Papanwar Priyanka
Papanwar Priyanka

Reputation: 59

convert objects into an array

I have response like below

    dropdown1: {enabled: true, label: "Country", eformVisible: false}
dropdown2: {enabled: false, label: "Dropdown2 Label", eformVisible: false, }
dropdown3: {enabled: false, label: "Dropdown3 Label", eformVisible: false, mandatory: "NOT_MANDATORY[enter link description here][1]", order: 32}
dropdown4: {enabled: false, label: "Dropdown4 Label", eformVisible: false, }
dropdown5: {enabled: false, label: "Dropdown5 Label", eformVisible: false, }
text1: {enabled: true, label: "Text1 Custom field", eformVisible: false, mandatory: "ADMIN_API", order: 0, …}
text2: {enabled: false, label: "Text2 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 1, …}
text3: {enabled: false, label: "Text3 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 2, …}
text4: {enabled: false, label: "Text4 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 3, …}
text5: {enabled: false, label: "Text5 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 4, …}
text6: {enabled: false, label: "Text6 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 5, …}

convert text 1,text2,text3 into text array and same dropdown object move into dropdown array .finally i need to bind this textbox and dropdown value using for loop if i am not wrong . this below i have written sample code

[1]: https://stackblitz.com/edit/angular-ivy-zzeijq

but from this difficult to find which one is textbox and drop down to bind in angular.

Upvotes: 1

Views: 92

Answers (3)

Cody E
Cody E

Reputation: 189

My solution to these types of problems follow this structure

const children = Object.keys(obj)
.filter(key => <return true for the keys I want>)
.map(key => <Construct textbox based on obj[key]>)

Fill in the blanks and this will output an array of elements which can be bound to your parent element

Upvotes: 1

Francesco Lisandro
Francesco Lisandro

Reputation: 720

Create a function that helps you to filter data according to the beginning of the string (data key):

function filter(data, query){
  return Object.values(Object.keys(data)
  .filter(key => new RegExp('^' + query, 'g').test(key))
  .map((key) => data[key]));
}

And then use it according to your needs:

console.log(filter(data,'date'));
console.log(filter(data,'text'));
console.log(filter(data,'dropdown'));

Insights

Upvotes: 3

PandaN&#239;rio
PandaN&#239;rio

Reputation: 11

You can browse object by keys and build groupedItem object like following :

    const obj = {
        dropdown1: {enabled: true, label: "Country", eformVisible: false},
        dropdown2: {enabled: false, label: "Dropdown2 Label", eformVisible: false, },
        dropdown3: {enabled: false, label: "Dropdown3 Label", eformVisible: false, mandatory: "NOT_MANDATORY[enter link description here][1]", order: 32},
        dropdown4: {enabled: false, label: "Dropdown4 Label", eformVisible: false, },
        dropdown5: {enabled: false, label: "Dropdown5 Label", eformVisible: false, },
        text1: {enabled: true, label: "Text1 Custom field", eformVisible: false, mandatory: "ADMIN_API", order: 0},
        text2: {enabled: false, label: "Text2 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 1},
        text3: {enabled: false, label: "Text3 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 2},
        text4: {enabled: false, label: "Text4 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 3},
        text5: {enabled: false, label: "Text5 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 4},
        text6: {enabled: false, label: "Text6 Label ", eformVisible: false, mandatory: "NOT_MANDATORY", order: 5}
    };
    
    const grouped = { text: [], dropdown: [] };
    Object.keys(obj).forEach((key) => {
        (key.includes('text')) ? grouped.text.push({...obj[key], initialKey: key}) : grouped.dropdown.push({...obj[key], initialKey: key});
    });

Upvotes: 1

Related Questions