CODEWITHSUNDEEP
javascriptarraysobject
Angelo
Angelo

Reputation: 1666

JS Convert Object with Properties as Array into Array List of Objects

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.

Upvotes: 0

Views: 755

Answers (3)

Rahul Kumar
Rahul Kumar

Reputation: 3157

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

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371208

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

Upvotes: 1

Robby Cornelissen
Robby Cornelissen

Reputation: 97371

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

Upvotes: 1

Related Questions