I have the following data incoming (reduced the objects for easier comprehension). My properties could include hundred to thousands of properties.
teams = {
teams: ['Lakers', 'Clippers', 'Bucks', 'Suns'],
states: ['California', 'California', 'Wisconsin', 'Arizona']
}
Note that the properties will always contain the same number of items for each.
I'd like to convert it to an Array List of objects:
teamsList = [
{ teams: 'Lakers', states: 'California' },
{ teams: 'Clippers', states: 'California' },
{ teams: 'Bucks', states: 'Wisconsin' },
{ teams: 'Suns', states: 'Arizona' }
]
This is what I have initially in mind and tried:
const parseData = (obj) => {
const teams = obj.teams;
const states = obj.states;
let newArrayList = [];
teams.forEach((item, index) => {
const teamData = {
teams: item,
states: states[index]
}
newArrayList.push(teamData);
})
return newArrayList;
}
I am wondering if there is a more optimal way to do this?
Forgot to add that I am looking for ways so that each object property in the new array list should be dynamic as well, like determine the keys for the new object without writing each specific property:
teams.forEach((item, index) => {
const teamData = {
teams: item,
states: states[index],
n: n[index]
}
newArrayList.push(teamData);
})
Where n corresponds to any number of possible object keys.
Thanks.
Map one of the arrays, and use the index to find the matching value in the other array, and return an object.
const teams = {
teams: ['Lakers', 'Clippers', 'Bucks', 'Suns'],
states: ['California', 'California', 'Wisconsin', 'Arizona']
};
const teamList = teams.teams.map((t, i) => ({ teams: t, states: teams.states[i] }));
console.log(teamList);If you have lots of properties, iterate over the entries.
const teams = {
teams: ['Lakers', 'Clippers', 'Bucks', 'Suns'],
states: ['California', 'California', 'Wisconsin', 'Arizona']
};
const entries = Object.entries(teams);
const [key, arr] = entries.shift();
const teamList = arr.map((val, i) => Object.fromEntries(
[[key, val]].concat(
entries.map(entry => [entry[0], entry[1][i]])
)
));
console.log(teamList);This solution works by first determining the length of the longest array, and then creating new objects dynamically based on the keys available in your data:
const data = {
teams: ['Lakers', 'Clippers', 'Bucks', 'Suns'],
states: ['California', 'California', 'Wisconsin', 'Arizona']
};
const result = [
...Array(Object.values(data).reduce((a, {length}) => Math.max(a, length), 0))
].map((_, i) => Object.keys(data).reduce((a, k) => ({...a, [k]: data[k][i]}), {}));
console.log(result);Use Array.map() which will iterate each element and return final array of object.
teams = {
teams: ['Lakers', 'Clippers', 'Bucks', 'Suns'],
states: ['California', 'California', 'Wisconsin', 'Arizona']
};
const parseData = (obj) => {
const states = teams.states;
return obj.teams.map((teams, index) => ({ teams, states: states[index] }));
}
console.log(parseData(teams));