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)