Kir*_*lla 3 javascript ecmascript-6 vue.js vuejs2
我试图从下面的数组中访问键值
我试图访问字段对象内的键和键对象内的模型的值
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..
看起来您需要做的就是遍历每个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;
});
});