How to map key values in sub sub objects from an array in java script

Question

I was trying to access key, values from the below array

I am trying to access keys inside the fields object and value from the model inside keys object

formFields = [
        {
            "title": "Criteria Details",
            "columns": 2,
            "fields": {
                "criteriaName": {
                    "type": "text",
                    "label": "Criteria Name",
                    "id": 'criteriaName',
                    "model": "CRITERIA 1",
                    "required": true,
                    "show": true,
                    "rules": [
                        v => !!v || 'Criteria Name is required',
                    ]
                },
                "criteriaType": {
                    "type": "select",
                    "label": "Criteria type",
                    "id": "criteriaType",
                    "options": ['Dependent', 'Independent', 'Static'],
                    "model": "Dependent",
                    "required": true,
                    "rules": [
                        v => !!v || 'Criteria Type is required',
                    ],
                    "show": true,
                },
                "table": {
                    "type": "select",
                    "label": "Table",
                    "id": "table",
                    "options": ["Table1"],
                    "model": "Table1",
                    "required": true,
                    "rules": [
                        v => !!v || 'Table is required',
                    ],
                    "show": true,
                },
                "column": {
                    "type": "select",
                    "label": "Column",
                    "id": "column",
                    "options": ["Column1"],
                    "model": "Column1",
                    "required": true,
                    "rules": [
                        v => !!v || 'Column is required',
                    ],
                    "show": true,
                },
                "joinType": {
                    "type": "select",
                    "label": "Join Type",
                    "id": "joinType",
                    "options": ["AND", "OR"],
                    "model": "OR",
                    "required": true,
                    "rules": [
                        v => !!v || 'Join Type is required',
                    ],
                    "show": true,
                },
                "operator": {
                    "type": "select",
                    "label": "Operator",
                    "id": "operator",
                    "options": ["<", "<=", "<>", "=", ">=", ">", "EXISTS", "IN", "IS NOT NULL", "NULL", "LIKE", "NOT EXISTS", "NOT IN", "NOT LIKE"],
                    "model": ">=",
                    "required": true,
                    "rules": [
                        v => !!v || 'Operator is required',
                    ],
                    "show": true,
                },
                "valueType": {
                    "type": "select",
                    "label": "Value Type",
                    "id": "valueType",
                    "options": ["Dependent SQL", "SQL", "VALUE"],
                    "model": "SQL",
                    "required": true,
                    "rules": [
                        v => !!v || 'Value Type is required',
                    ],
                    "show": true,
                },
                "dataType": {
                    "type": "select",
                    "label": "Data Type",
                    "id": "dataType",
                    "options": ["DATE", "NUMBER", "STRING"],
                    "model": "NUMBER",
                    "required": true,
                    "rules": [
                        v => !!v || 'Data Type is required',
                    ],
                    "show": true,
                },
                "format": {
                    "type": "text",
                    "label": "Format",
                    "id": "format",
                    "model": "Config",
                    "required": false,
                    "show": true,
                },
                "parameterMandatory": {
                    "type": "select",
                    "label": "Parameter Mandatory",
                    "id": "parameterMandatory",
                    "options": ["NO", "YES"],
                    "model": "YES",
                    "required": true,
                    "rules": [
                        v => !!v || 'Parameter Mandatory is required',
                    ],
                    "show": true,
                },
                "link": {
                    "type": "select",
                    "label": "Link",
                    "id": "link",
                    "options": ["KB"],
                    "model": "KB",
                    "required": false,
                    "show": true,
                },
                "sequence": {
                    'type': "text",
                    "label": "Sequence",
                    "id": "sequence",
                    "model": "SEQ1",
                    "required": true,
                    "rules": [
                        v => !!v || 'Sequence is required',
                    ],
                    "show": true,
                },
                "value": {
                    "type": "description_notes",
                    "label": "Value",
                    "id": "value",
                    "model": "VAL",
                    "required": true,
                    "rules": [
                        v => !!v || 'Value is required',
                    ],
                    "show": true,
                }
            }
        },
        {
            'title': "Notes",
            "columns": 1,
            "fields": {
                "description": {
                    "type": "description_notes",
                    "label": "Description",
                    "id": "description",
                    "required": false,
                    "model": 'abcde',
                    "show": true,
                }
            }
        }
    ]

****The Output i was trying is like this.**** How to access the keys and values from the above array like this. Which method we need to use

criteriaDetails: [
    {"criteriaName": "CRITERIA 1"}, 
    {"criteriaType": "Dependent"},
    {"table": "Table1"},
    {"column": "Column1"},
    {"joinType": "OR"},
    {"operator": ">="},
    {"valueType": "SQL"},
    {"dataType": "NUMBER"},
    {"format": "Config"},
    {"parameterMandatory": "YES"},
    {"link": "KB"},
    {"sequence": "SEQ1"},
    {"value": "VAL"},
    {"description": "abcde"}
]

I tried below code

const field = this.formFields.map(field => {
      return Object.entries(field.fields)
})
console.log(field)

how can I achieve this? How to solve this. Please help

Thanks..

Do you only want the criteriaDetails? Or do you want to repeat this for every item in your array? — Borisu
– Borisu, Commented Nov 28, 2018 at 8:26
In your example your output shows an array that has criteriaName, criteriaType in a specific order (same as the input object from top to bottom). If that order is critical then you can't use any of the given answers because Object.entries, Object.keys, for ... in/of to get key/values of an object does not guarantee any order. In fact it states you'll get them in an arbitrary order — HMR
– HMR, Commented Nov 28, 2018 at 10:18

CertainPerformance · Accepted Answer · 2018-11-28 10:23:02Z

It looks like all you need to do is iterate over each fields object, and extract the key and the model property from each:

const formFields=[{"title":"Criteria Details","columns":2,"fields":{"criteriaName":{"type":"text","label":"Criteria Name","id":'criteriaName',"model":"CRITERIA 1","required":!0,"show":!0,"rules":[v=>!!v||'Criteria Name is required',]},"criteriaType":{"type":"select","label":"Criteria type","id":"criteriaType","options":['Dependent','Independent','Static'],"model":"Dependent","required":!0,"rules":[v=>!!v||'Criteria Type is required',],"show":!0,},"table":{"type":"select","label":"Table","id":"table","options":["Table1"],"model":"Table1","required":!0,"rules":[v=>!!v||'Table is required',],"show":!0,},"column":{"type":"select","label":"Column","id":"column","options":["Column1"],"model":"Column1","required":!0,"rules":[v=>!!v||'Column is required',],"show":!0,},"joinType":{"type":"select","label":"Join Type","id":"joinType","options":["AND","OR"],"model":"OR","required":!0,"rules":[v=>!!v||'Join Type is required',],"show":!0,},"operator":{"type":"select","label":"Operator","id":"operator","options":["<","<=","<>","=",">=",">","EXISTS","IN","IS NOT NULL","NULL","LIKE","NOT EXISTS","NOT IN","NOT LIKE"],"model":">=","required":!0,"rules":[v=>!!v||'Operator is required',],"show":!0,},"valueType":{"type":"select","label":"Value Type","id":"valueType","options":["Dependent SQL","SQL","VALUE"],"model":"SQL","required":!0,"rules":[v=>!!v||'Value Type is required',],"show":!0,},"dataType":{"type":"select","label":"Data Type","id":"dataType","options":["DATE","NUMBER","STRING"],"model":"NUMBER","required":!0,"rules":[v=>!!v||'Data Type is required',],"show":!0,},"format":{"type":"text","label":"Format","id":"format","model":"Config","required":!1,"show":!0,},"parameterMandatory":{"type":"select","label":"Parameter Mandatory","id":"parameterMandatory","options":["NO","YES"],"model":"YES","required":!0,"rules":[v=>!!v||'Parameter Mandatory is required',],"show":!0,},"link":{"type":"select","label":"Link","id":"link","options":["KB"],"model":"KB","required":!1,"show":!0,},"sequence":{'type':"text","label":"Sequence","id":"sequence","model":"SEQ1","required":!0,"rules":[v=>!!v||'Sequence is required',],"show":!0,},"value":{"type":"description_notes","label":"Value","id":"value","model":"VAL","required":!0,"rules":[v=>!!v||'Value is required',],"show":!0,}}},{'title':"Notes","columns":1,"fields":{"description":{"type":"description_notes","label":"Description","id":"description","required":!1,"model":'abcde',"show":!0,}}}]
    
const output = [];
formFields.forEach(({ fields }) => {
  Object.entries(fields).forEach(([key, { model }]) => {
    output.push({ [key]: model });
  });
});
console.log(output);

The ({ fields}) is destructuring the object you pass to the callback. It would be equivalent to

formFields.forEach((obj) => {
    Object.entries(obj.fields)

Object.entries will return an array with two values, the first is the current key and the second is the object associated with the key. That's why you can destructure again with (([key, { model }]).

As a reference you could rewrite the whole thing as

formFields.forEach((curObj) => {
  Object.entries(curObj.fields).forEach(([key, fieldValues]) => {
    output[key] = fieldValues.model;
  });
});

Using an object as input data type is not a good idea if the output is expected to be in a certain order because any of the object key/values itterator does not guarantee the order in which you'll get them in fact it says in arbitrary order. Code will happen to work on JSON data but this is not guaranteed and can break.

Robert Mennell · Accepted Answer · 2018-11-28 08:58:21Z

There are many ways to do this.

You can use the Array.prototype.reduce() method to reduce the array to a single value, and use the Object.entries static method to extract the key and value

const formFields=[{"title":"Criteria Details","columns":2,"fields":{"criteriaName":{"type":"text","label":"Criteria Name","id":'criteriaName',"model":"CRITERIA 1","required":!0,"show":!0,"rules":[v=>!!v||'Criteria Name is required',]},"criteriaType":{"type":"select","label":"Criteria type","id":"criteriaType","options":['Dependent','Independent','Static'],"model":"Dependent","required":!0,"rules":[v=>!!v||'Criteria Type is required',],"show":!0,},"table":{"type":"select","label":"Table","id":"table","options":["Table1"],"model":"Table1","required":!0,"rules":[v=>!!v||'Table is required',],"show":!0,},"column":{"type":"select","label":"Column","id":"column","options":["Column1"],"model":"Column1","required":!0,"rules":[v=>!!v||'Column is required',],"show":!0,},"joinType":{"type":"select","label":"Join Type","id":"joinType","options":["AND","OR"],"model":"OR","required":!0,"rules":[v=>!!v||'Join Type is required',],"show":!0,},"operator":{"type":"select","label":"Operator","id":"operator","options":["<","<=","<>","=",">=",">","EXISTS","IN","IS NOT NULL","NULL","LIKE","NOT EXISTS","NOT IN","NOT LIKE"],"model":">=","required":!0,"rules":[v=>!!v||'Operator is required',],"show":!0,},"valueType":{"type":"select","label":"Value Type","id":"valueType","options":["Dependent SQL","SQL","VALUE"],"model":"SQL","required":!0,"rules":[v=>!!v||'Value Type is required',],"show":!0,},"dataType":{"type":"select","label":"Data Type","id":"dataType","options":["DATE","NUMBER","STRING"],"model":"NUMBER","required":!0,"rules":[v=>!!v||'Data Type is required',],"show":!0,},"format":{"type":"text","label":"Format","id":"format","model":"Config","required":!1,"show":!0,},"parameterMandatory":{"type":"select","label":"Parameter Mandatory","id":"parameterMandatory","options":["NO","YES"],"model":"YES","required":!0,"rules":[v=>!!v||'Parameter Mandatory is required',],"show":!0,},"link":{"type":"select","label":"Link","id":"link","options":["KB"],"model":"KB","required":!1,"show":!0,},"sequence":{'type':"text","label":"Sequence","id":"sequence","model":"SEQ1","required":!0,"rules":[v=>!!v||'Sequence is required',],"show":!0,},"value":{"type":"description_notes","label":"Value","id":"value","model":"VAL","required":!0,"rules":[v=>!!v||'Value is required',],"show":!0,}}},{'title':"Notes","columns":1,"fields":{"description":{"type":"description_notes","label":"Description","id":"description","required":!1,"model":'abcde',"show":!0,}}}]

const output = formFields.reduce((accumulator, { fields }) => {
  return Object.assign(accumulator, Object.entries(fields)
    .reduce((accumulatorInside, [key, { model }]) => {
      accumulatorInside[key] = model;
      return accumulatorInside;
    }, {})
  )
}, {});

console.log(output);

Or you can use loops

const output = {};

for (let index = 0; index < formFields.length; index++) {
  for (let key in formFields[index].fields) {
    if (formFields[index].fields.hasOwnProperty(key))
      output[key] = formFields[index].fields[key].model;
  }
}

console.log(output);

You could also do this with Array.prototype.forEach()(from @certainperformance answer, go up-vote that too)

const output = {};

formFields.forEach(({ fields }) => {
  Object.entries(fields).forEach(([key, { model }]) => {
    output[key] = model;
  });
});

console.log(output);

The basic idea is the same regardless. You need to iterate over the properties and set the values.

From a performance standpoint: closures that move outside their scope are slower than functions that do not, and for...in loops are the fastest, but the most verbose to use.

BE CAREFUL! for...in loops do have some caveats! The reason I do the check for the own property is to prevent copying any prototypes. This is the one issue with the loop. You may instead want to use a for loop with the array returned with Object.getOWnPropertyNames() static method instead since it is safer and won't traverse prototypes, but it adds extra time complexity.

These are however considerations when you don't want to use side effects(Array.prototype.forEach()) or need to squeeze as MUCH speed as possible out of your code.

zhangwei · Accepted Answer · 2018-11-28 09:02:54Z

const formFields = [{"title":"Criteria Details","columns":2,"fields":{"criteriaName":{"type":"text","label":"Criteria Name","id":'criteriaName',"model":"CRITERIA 1","required":!0,"show":!0,"rules":[v=>!!v||'Criteria Name is required',]},"criteriaType":{"type":"select","label":"Criteria type","id":"criteriaType","options":['Dependent','Independent','Static'],"model":"Dependent","required":!0,"rules":[v=>!!v||'Criteria Type is required',],"show":!0,},"table":{"type":"select","label":"Table","id":"table","options":["Table1"],"model":"Table1","required":!0,"rules":[v=>!!v||'Table is required',],"show":!0,},"column":{"type":"select","label":"Column","id":"column","options":["Column1"],"model":"Column1","required":!0,"rules":[v=>!!v||'Column is required',],"show":!0,},"joinType":{"type":"select","label":"Join Type","id":"joinType","options":["AND","OR"],"model":"OR","required":!0,"rules":[v=>!!v||'Join Type is required',],"show":!0,},"operator":{"type":"select","label":"Operator","id":"operator","options":["<","<=","<>","=",">=",">","EXISTS","IN","IS NOT NULL","NULL","LIKE","NOT EXISTS","NOT IN","NOT LIKE"],"model":">=","required":!0,"rules":[v=>!!v||'Operator is required',],"show":!0,},"valueType":{"type":"select","label":"Value Type","id":"valueType","options":["Dependent SQL","SQL","VALUE"],"model":"SQL","required":!0,"rules":[v=>!!v||'Value Type is required',],"show":!0,},"dataType":{"type":"select","label":"Data Type","id":"dataType","options":["DATE","NUMBER","STRING"],"model":"NUMBER","required":!0,"rules":[v=>!!v||'Data Type is required',],"show":!0,},"format":{"type":"text","label":"Format","id":"format","model":"Config","required":!1,"show":!0,},"parameterMandatory":{"type":"select","label":"Parameter Mandatory","id":"parameterMandatory","options":["NO","YES"],"model":"YES","required":!0,"rules":[v=>!!v||'Parameter Mandatory is required',],"show":!0,},"link":{"type":"select","label":"Link","id":"link","options":["KB"],"model":"KB","required":!1,"show":!0,},"sequence":{'type':"text","label":"Sequence","id":"sequence","model":"SEQ1","required":!0,"rules":[v=>!!v||'Sequence is required',],"show":!0,},"value":{"type":"description_notes","label":"Value","id":"value","model":"VAL","required":!0,"rules":[v=>!!v||'Value is required',],"show":!0,}}},{'title':"Notes","columns":1,"fields":{"description":{"type":"description_notes","label":"Description","id":"description","required":!1,"model":'abcde',"show":!0,}}}]
let result = []
formFields.forEach(item => {
    const entries = Object.entries(item.fields)
    entries.forEach(([key, { model }]) => {
        result.push({
            [key]: model
        })
    })
})
console.log(result)

Collectives™ on Stack Overflow

How to map key values in sub sub objects from an array in java script

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related