반응형
Java 스크립트의 배열에서 하위 하위 개체의 키 값을 매핑하는 방법
아래 배열의 값에 액세스하려고 했습니다.
필드 개체 내의 키와 모델 내부 키 개체의 값에 액세스하려고 합니다.
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는 2개의 값을 가진 배열을 반환합니다.첫 번째 값은 현재 키이고 두 번째 값은 키와 관련된 개체입니다.이 때문에, 델의 IT스탭에 의한(([key, { model }]).
참고 자료로 전체 내용을 다음과 같이 다시 쓸 수 있습니다.
formFields.forEach((curObj) => {
Object.entries(curObj.fields).forEach(([key, fieldValues]) => {
output[key] = fieldValues.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,}}}]
let result = []
formFields.forEach(item => {
const entries = Object.entries(item.fields)
entries.forEach(([key, { model }]) => {
result.push({
[key]: model
})
})
})
console.log(result)이렇게 하는 방법은 여러 가지가 있습니다.
를 사용할 수 있습니다.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()(@performance answer에서, 그것도 상향 조정)
const output = {};
formFields.forEach(({ fields }) => {
Object.entries(fields).forEach(([key, { model }]) => {
output[key] = model;
});
});
console.log(output);
어쨌든 기본적인 생각은 같다.속성에서 반복하여 값을 설정해야 합니다.
성능 관점에서: 범위를 벗어나는 폐쇄는 그렇지 않은 기능보다 느리고,for...in루프가 가장 빠르지만 가장 상세하게 사용됩니다.
조심해!for...in루프에는 몇 가지 경고가 있습니다!제가 소유물 검사를 하는 이유는 시제품 복사를 방지하기 위해서입니다.이것이 루프의 유일한 문제입니다.대신 다음 명령을 사용할 수 있습니다.for반환된 어레이와 함께 루프Object.getOWnPropertyNames()시제품을 이동하지 않고 안전하기 때문에 정적 방법을 사용하는 대신 시간이 더 복잡해집니다.
단, 부작용을 원하지 않을 때 고려해야 할 사항입니다.Array.prototype.forEach()또는 가능한 한 많은 속도를 코드에서 짜내야 합니다.
언급URL : https://stackoverflow.com/questions/53514883/how-to-map-key-values-in-sub-sub-objects-from-an-array-in-java-script
반응형
'programing' 카테고리의 다른 글
| Larabel Migration을 사용하여 타임스탬프 열의 기본값을 현재 타임스탬프로 설정하려면 어떻게 해야 합니까? (0) | 2022.10.03 |
|---|---|
| dict에서 값 목록을 가져오려면 어떻게 해야 합니까? (0) | 2022.10.03 |
| 일식이 시작되지 않음 - Java 가상 시스템을 찾을 수 없습니다. (0) | 2022.10.03 |
| Javascript를 사용하여 DOM 요소를 대체하려면 어떻게 해야 합니까? (0) | 2022.10.03 |
| C에서의 템플릿 시뮬레이션(큐 데이터 타입의 경우) (0) | 2022.10.03 |