如何在java腳本中映射數組中子子對象中的鍵值

Question

我試圖從下面的數組中訪問鍵值

我試圖訪問字段對象內的鍵和鍵對象內的模型的值

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,
                }
            }
        }
    ]

****我正在嘗試的輸出是這樣的。**** 如何從上面的數組中訪問鍵和值。 我們需要使用哪種方法

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"}
]

我試過下面的代碼

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

我該怎么做到這一點？ 怎么解決這個問題。 請幫忙

Thanks..

Answer 1

看起來您需要做的就是迭代每個fields對象，並從每個fields對象中提取密鑰和model屬性：

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

({ fields})正在解析傳遞給回調的對象。 這相當於

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

Object.entries將返回一個包含兩個值的數組，第一個是當前鍵，第二個是與鍵關聯的對象。 這就是你可以用(([key, { model }])再次進行結構化的原因。

作為參考，你可以重寫整個事情

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

Answer 2

 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) 

Answer 3

有很多方法可以做到這一點。

您可以使用Array.prototype.reduce()方法將數組減少為單個值，並使用Object.entries靜態方法提取鍵和值

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

或者你可以使用循環

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

您也可以使用Array.prototype.forEach()執行此操作（來自@certainperformance的答案，也可以進行投票）

const output = {};

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

console.log(output);

無論如何，基本思想都是一樣的。 您需要迭代屬性並設置值。

從性能的角度來看：移動到其范圍之外的閉包比不復制的函數慢，並且for...in循環是最快的，但是使用最冗長。

小心！ for...in循環確實有一些警告！ 我檢查自己的屬性的原因是為了防止復制任何原型。 這是循環的一個問題。 您可能希望使用帶有Object.getOWnPropertyNames()靜態方法返回的數組的for循環，因為它更安全且不會遍歷原型，但它增加了額外的時間復雜性。

但是，如果您不想使用副作用（ Array.prototype.forEach() ）或者需要盡可能快地擠出代碼，則需要考慮這些因素。