How to combine two arrays into multiple objects with data from each array?

Question

I am trying to resolve two arrays of length n into n objects with the same number of key value pairs as there are arrays. Each object should have a dynamic name key that correlates to the object's position.

For example, if there are 10 items in each array, there should be 10 objects and each objects should have a name key the is sequential --> Day[n]

The input will look like this:

// input
const temperatures: [65, 33]
const rain: [3, 8]

The output shape should look something like this:

// output
[
  {
    name: 'Day1',
    temperature: 65,
    rain: 3
  },
  {
    name: 'Day2',
    temperature: 33,
    rain: 8
  },
]

I've tried mapping through each array and creating an object for each array item and then combining them into one array of objects, but for some reasson, the results array only includes one set of the array names.

This is my code so far:

const temperature = [65, 33];
const rain = [3, 8];
const days = { name: 'Day1' };

const data1 = temperature.map((val) => {
  return { temperature: val };
});

const data2 = rain.map((val) => {
  return { rain: val };
});

const total = { ...days, ...data1, ...data2 };

console.log(total);

// output: { '0': { temperature: 65 }, '1': { temperature: 33 }, name: 'Day1' }

NOTE: I am creating the input arrays, so if there is any data I need to add or make changes to, that is a possibility.

Other Me · Accepted Answer · 2021-05-04 03:45:01Z

1

const temperature = [65, 33];
const rain = [3, 8]; 
const length = Math.max(temperature.length, rain.length);

const output = [];

for(let i = 0; i < length; i++) {
  output.push({rain:rain[i], temperature:temperature[i], name:`Day${i+1}`});
}

edited May 4, 2021 at 3:45

answered May 4, 2021 at 3:39

Other Me

5082 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Other Me Over a year ago

to be completely fair I noticed after that I didn't have the name property so I borrowed from the other answers

Mister Jojo · Accepted Answer · 2021-05-04 03:39:32Z

0

const 
  temperatures = [ 65, 33 ]
, rain         = [  3,  8 ]
, output = temperatures.map((t,i) =>
     ( { name        : `day${i+1}`
       , temperature : t
       , rain        : rain[i] 
     }))
;
console.log( output )

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

answered May 4, 2021 at 3:39

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

Comments

Braiden Cutforth · Accepted Answer · 2021-05-04 03:39:41Z

0

Assuming the input arrays are of the same size, one possible way of doing this would be the following:

const result = temperature.map((temp, index) => {
    return { name: `Day${index+1}`, temperature: temp, rain: rain[index] };
};

Although personally I don't think this is the cleanest or clearest way, and it may be worth considering changing the input types.

answered May 4, 2021 at 3:39

Braiden Cutforth

3083 silver badges7 bronze badges

Comments

Atheesh Thirumalairajan · Accepted Answer · 2021-05-04 03:47:31Z

0

Your use case does not require the use of the map() function.

I assume that, both the arrays temperature and rain always have the same number of elements. That is, if temperature array has temperature data for 3 Days then, even the rain array should have rain data for 3 Days

By taking the above assumption, We can loop over the elements of temperature array and insert a single object for each day into a new and final array which is your expected output.

We will use the every() function to achieve out goal:

var finalArray = [];

temperature.every((element, index) => {
    finalArray.push({
        name: `Day ${index}`, //Use index+1 for Day 1 and not Day 0
        temperature: element,
        rain: rain[index]
    });
});

console.log(finalArray); //The output

answered May 4, 2021 at 3:47

Atheesh Thirumalairajan

8121 gold badge6 silver badges21 bronze badges

4 Comments

Tyler Morales Over a year ago

Correct, both arrays will always have the same number of items. Would this solution work, if the input arrays included another array such as `const snow = [5, 10]?

Atheesh Thirumalairajan Over a year ago

Yes Of course! You can add snow: snow[index] after the rain key in the above snippet.

Atheesh Thirumalairajan Over a year ago

It will work in all cases. The limitation of this method is all arrays should have the same number of elements. If there is no rain in a particular day, you can set rain as 0 in the array to maintain the same count of elements. Similarly it applies for snow, temperature, etc.

Tyler Morales Over a year ago

I'm not worried differentiating array lengths. My main concern is the re-usability.

Rahul Kumar · Accepted Answer · 2021-05-04 03:53:23Z

0

Create a function which accepts temperature and rain as parameter and returns the final result. Here we assume that both temperature and rain array are of same length.

const temperature = [65, 33];
const rain = [3, 8];

function convertArray(temperature, rain) {
    const result = [];
    for (let i = 0; i < rain.length; i++) {
        const weather = {
            name: `Day${i + 1}`,
            temperature: temperature[i],
            rain: rain[i]
        }
        result.push(weather)
    }
    return result;
}

console.log(convertArray(temperature, rain));

edited May 4, 2021 at 3:53

answered May 4, 2021 at 3:44

Rahul Kumar

3,1572 gold badges18 silver badges23 bronze badges

2 Comments

Tyler Morales Over a year ago

I like this approach. I assume that if I were to call the convertArray function with say, two or three different array such as snow, sleet or sunshine, this would work as well. My main goal is to make this function as reusable as possoible to accept any number of arrays with n length.

Rahul Kumar Over a year ago

@TylerMorales, That's correct, i always prefer function to make code reusable. please upvote the answer..

Collectives™ on Stack Overflow

How to combine two arrays into multiple objects with data from each array?

5 Answers 5

1 Comment

Comments

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related