Convert two arrays to one object, with same key for each array in Javascript

Question

For example, I have two arrays like these.

const dateArray = ['January', 'February', 'March', 'April', 'May', 'June']

const InfoArray = [
  { Date : '2022-01', Active: 1 },
  { Date : '2022-02', Active: 12 },
  { Date : '2022-03', Active: 25 },
  { Date : '2022-04', Active: 33 },
  { Date : '2022-05', Active: 120 },
  { Date : '2022-06', Active: 335 },
]

However, I want combined these two arrays into an array of objects.

const result = [
  { month: 'January', Active: 1 },
  { month: 'February', Active: 12 },
  { month: 'March', Active: 25 },
  { month: 'April', Active: 33 },
  { month: 'May', Active: 120 },
  { month: 'June', Active: 335 },
]

I looked for some information, and did like

  const makeObjectWithTwoArray = () => {

    let chartObj = {}

    dateArray.forEach((element, index) => {
      chartObj[element] = infoArray[index]
    })

    return chartObj
  }

however doesn't work at all. (of course because each array can't have same keys with the code.)

Your help will be much appreciated.

Answer 1

You can use the function Array.prototype.map as follows:

const dateArray = ['January', 'February', 'March', 'April', 'May', 'June']
const InfoArray = [
  { Date : '2022-01', Active: 1 },
  { Date : '2022-02', Active: 12 },
  { Date : '2022-03', Active: 25 },
  { Date : '2022-04', Active: 33 },
  { Date : '2022-05', Active: 120 },
  { Date : '2022-06', Active: 335 },
];

const result = InfoArray.map(({Date, Active}) => {
  const [_, month] = Date.split("-");
  return {Active, month: dateArray[[Number(month) - 1]]};
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

const dateArray = ['January', 'February', 'March', 'April', 'May', 'June']

const InfoArray = [
  { Date : '2022-01', Active: 1 },
  { Date : '2022-02', Active: 12 },
  { Date : '2022-03', Active: 25 },
  { Date : '2022-04', Active: 33 },
  { Date : '2022-05', Active: 120 },
  { Date : '2022-06', Active: 335 },
]


const result = InfoArray.map(item => {
  const monthNumber = item.Date.split('-')[1]
  const month = dateArray[+monthNumber - 1]
  return {
    Active: item.Active,
    month
  }
})


console.log(result)

Answer 3

You Actually don't need the dateArray you can just extract the month name from the Date property.

const InfoArray = [
  { Date : '2022-01', Active: 1 },
  { Date : '2022-02', Active: 12 },
  { Date : '2022-03', Active: 25 },
  { Date : '2022-04', Active: 33 },
  { Date : '2022-05', Active: 120 },
  { Date : '2022-06', Active: 335 },
]

let result = InfoArray.map(e => ({
  month: new Date(e.Date).toLocaleString('default', {month: 'long'}),
  Active: e.Active
}))

console.log(result)

Answer 4

Another alternative is using .reduce.

Note: I didn't return [...arr, {...}] implicitly since it would have created a different array on each iteration. return arr is better if you are going to have a large data (potenitally)

const dateArray = ['January', 'February', 'March', 'April', 'May', 'June']

const InfoArray = [
  { Date : '2022-01', Active: 1 },
  { Date : '2022-02', Active: 12 },
  { Date : '2022-03', Active: 25 },
  { Date : '2022-04', Active: 33 },
  { Date : '2022-05', Active: 120 },
  { Date : '2022-06', Active: 335 },
]

const combined = InfoArray.reduce((arr, {Date, Active}) => {
  arr.push({
   Date: dateArray[Number(Date.split("-")[1]) -1],
   Active
  })
  return arr
}, [])

console.log("combined: ", combined)