JavaScript: create an array of JSON objects from linking two arrays

Suppose, we have two arrays like these ?

const meals = ["breakfast", "lunch", "dinner"];
const ingredients = [
    ["eggs", "yogurt", "toast"],
    ["falafel", "mushrooms", "fries"],
    ["pasta", "cheese"]
];

We are required to write a JavaScript function that takes in two such arrays and maps the subarrays in the second array to the corresponding strings of the first array.

Therefore, the output for the above arrays should look like ?

{
    "breakfast" : ["eggs", "yogurt", "toast"],
    "lunch": ["falafel", "mushrooms", "fries"],
    "dinner": ["pasta", "cheese"]
}

Using forEach() Method

The forEach() method with a custom context allows us to build the object by iterating through the meals array:

const meals = ["breakfast", "lunch", "dinner"];
const ingredients = [
    ["eggs", "yogurt", "toast"],
    ["falafel", "mushrooms", "fries"],
    ["pasta", "cheese"]
];

const combineMealAndIngredient = (meals, ingredients) => {
    const res = {};
    meals.forEach(function (el, ind) {
        this[el] = ingredients[ind];
    }, res);
    return res;
};

console.log(combineMealAndIngredient(meals, ingredients));

{
    breakfast: [ 'eggs', 'yogurt', 'toast' ],
    lunch: [ 'falafel', 'mushrooms', 'fries' ],
    dinner: [ 'pasta', 'cheese' ]
}

Using reduce() Method

The reduce() method provides a more functional approach:

const meals = ["breakfast", "lunch", "dinner"];
const ingredients = [
    ["eggs", "yogurt", "toast"],
    ["falafel", "mushrooms", "fries"],
    ["pasta", "cheese"]
];

const combineMealAndIngredient = (meals, ingredients) => {
    return meals.reduce((acc, meal, index) => {
        acc[meal] = ingredients[index];
        return acc;
    }, {});
};

console.log(combineMealAndIngredient(meals, ingredients));

{
    breakfast: [ 'eggs', 'yogurt', 'toast' ],
    lunch: [ 'falafel', 'mushrooms', 'fries' ],
    dinner: [ 'pasta', 'cheese' ]
}

Using Object.fromEntries()

A modern approach using Object.fromEntries() with map():

const meals = ["breakfast", "lunch", "dinner"];
const ingredients = [
    ["eggs", "yogurt", "toast"],
    ["falafel", "mushrooms", "fries"],
    ["pasta", "cheese"]
];

const combineMealAndIngredient = (meals, ingredients) => {
    return Object.fromEntries(
        meals.map((meal, index) => [meal, ingredients[index]])
    );
};

console.log(combineMealAndIngredient(meals, ingredients));

{
    breakfast: [ 'eggs', 'yogurt', 'toast' ],
    lunch: [ 'falafel', 'mushrooms', 'fries' ],
    dinner: [ 'pasta', 'cheese' ]
}

Comparison

Conclusion

All three methods effectively combine two arrays into a JSON object. The reduce() method is most commonly preferred for its functional programming style, while Object.fromEntries() offers the cleanest syntax for modern JavaScript environments.