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

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.

CodePudding user response：

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

CodePudding user response：

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)

CodePudding user response：

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)

CodePudding user response：

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)