使用旧对象中的新关键字名称创建新的Js对象数组

Question

我正在尝试从数据创建一个新的Array of Object，该数据是来自API的另一个对象数组。我们最终将获得的新数组应该从dataFromApi中获得值，并且将从另一个数组中选择更新的关键字名称，该数组包含这些属性的先前key和new key name | label。此数据将以CSV文件导出。因此，我们使用可重复使用的组件进行导出，我想使数据的转换成为动态的。由于当前密钥名称看起来像currentApplyStart，并且在CSV文件中，它们不是好的标头。

所以，

我们从这个函数中得到一个新的键名数组。这个函数试图解决的是，得到一对oldKeyName and its newKeyName || new key and label

const newKeyName = () =>  { 
if (data?.length) {
const allColumn = Object.keys(data?.[0]);
const columnKeys = dataColumns
.filter((header) => allColumn.indexOf(header.key) >= 0)
.map((column) => {
return { key: column.key, label: column.label };
});
return columnKeys;
};
}

返回类似的内容。这是演示数据。

let dataColumns = [
{key : 'color', label : 'newColor'} , 
{key : 'annoying', label : 'newAnnoying'},
key : 'height', label : 'newHeight'}
//  we only return these top three as the api data object consist only has these two keys in itself.
{key : 'meta', label : 'newMeta'}
{key : 'costApplyStart', label : 'CPA'}
]

let newKeyNames = [
{key : 'color', label : 'newColor'} , 
{key : 'annoying', label : 'newAnnoying'},
{key : 'height', label : 'newHeight'} ] 
// as only these three key name exist in dataFromApi.

假设我们有一个来自API 的对象数组

let DataFromApi = [
{ 
color: 'red',
annoying: true,
height: 'unknown',
},
{ 
color: 'blue',
annoying: false,
height: 'unknown',
},
{ 
color: 'red',
annoying: false,
height: 'unknown',
},
];

我最终想要的数据应该是这样的

let finalData = [
{newColor: 'red',newAnnoying: true, newHeight: 'unknown',}, 
{newColor: 'blue',newAnnoying: false, newHeight: 'unknown',}
{
color: 'red',
annoying: 'false,
newHeight: 'unknown',
},
]

观察数据，我把旧的密钥名称改成了一个新的密钥，我想把它作为csvFile中的头。我不能更改原始数据，因此我必须创建一个新的数据数组。我尝试的解决方案是这样的，但我没有得到想要的结果。

newKeyNames?.map((field) => {
return dataFromAPi.map((item) => {
if (item.hasOwnProperty(field.key)) {
item[field.label] = item[field.key];
}
});
});

Answer 1

根据后面的解释，我更新了答案。

以下是JSFiddle链接：https://jsfiddle.net/_ghost/py8et9vf/57/

let DataFromApi = [
{ 
color: 'red',
annoying: true,
height: 'unknown',
meta: { one: '1', two: '2'}
},
{ 
color: 'blue',
annoying: false,
height: 'unknown',
meta: { one: '1', two: '2'}
},
{ 
color: 'red',
annoying: true,
height: 'unknown',
meta: { one: '1', two: '2'}
},
];
let dataColumns = [
{key : 'color', label : 'newColor'} , 
{key : 'annoying', label : 'newAnnoying'},
{key : 'somekey', label : 'newSomeKey'},
{key : 'anotherKey', label : 'newAnotherKey'}
]
function getAllDataCols(){
let obj = {};

// Make a new object from all the dataColums for ease of use

dataColumns.forEach(item => {
obj[item.key] = item.label
})

return obj
}
function processDataFromApi(newDataCols){
let result = []
DataFromApi.forEach(obj => {

let newObj = {}

Object.keys(obj).forEach(name => {

if(newDataCols[name] !== undefined){
//if we have an alternative for the name

newObj[newDataCols[name]] = obj[name]
}else{
// we don't have an alternative. use the already existing name
newObj[name] = obj[name]
}

})

result.push(newObj)
})

return result
}
let newDataCols = getAllDataCols()
let response = processDataFromApi(newDataCols)
console.log(response)

Answer 2

首先，您可以将newKeyNames数组转换为对象或映射。然后使用Object.entries将对象析构为[key,value]对，然后对这些对应用重命名，并使用这些对中的Object.fromEtnries构建新对象。

let newKeyNames = new Map([{
key: 'color',
label: 'newColor'
},
{
key: 'annoying',
label: 'newAnnoying'
},
{
key: 'height',
label: 'newHeight'
}
].map(({
key,
label
}) => [key, label]));
const dataFromApi = [{
color: 'red',
annoying: true,
height: 'unknown',
},
{
color: 'blue',
annoying: false,
height: 'unknown',
},
{
color: 'red',
annoying: false,
height: 'unknown',
},
];
const renamedObjectArray = dataFromApi.map(item => Object.fromEntries(
Object.entries(item)
.filter(([key, ]) => newKeyNames.get(key)) // this will filter out the properties that doesn't exist on newKeyNames map
.map(([key, val]) => [newKeyNames.get(key), val]) // this will rebuild an object with renamed keys
));
console.log(renamedObjectArray)