Using map in a multidimensional array Javascript

Question

I have this set of data that I'm trying to convert to map:

x = [
    {
        food: 'Steak',
        ingredients: [
            {
                item1: 'pepper',
            },
            {
                item2: "salt",
            },
        ],
    },
    {
        food: 'Veggies'
    },
    {
        food: 'Fruits'
    },
];

This is my current map function, question is how do I iterate on the ingredients?:

<div>
    {Object.keys(x).map(key => (
        <a key={key}>{x[key].food}</a>
    ))}
</div>

Answer 1

Something like this?

x = [
    {
        food: 'Steak',
        ingredients: [
            {
                item1: 'pepper',
            },
            {
                item2: "salt",
            },
        ],
    },
    {
        food: 'Veggies'
    },
    {
        food: 'Fruits'
    },
];

const list = x.map(item => 
    ({[item.food]: item.ingredients ? 
        item.ingredients.flatMap(i =>      
        Object.keys(i).map(k => 
            i[k])).join(','): 'no ingredients'}))

console.log(list)

Output:

[
  {
    "Steak": "pepper,salt"
  },
  {
    "Veggies": "no ingredients"
  },
  {
    "Fruits": "no ingredients"
  }
]

A better format for the data:

x = [
    {
        food: 'Steak',
        ingredients: [
             "pepper", "salt",
        ],
    },
    {
        food: 'Veggies'
    },
    {
        food: 'Fruits'
    },
];

Naming things is 80% of programming. The other 20% is choosing the right font for your IDE.

If you have an array of objects and the key of object holds no semantic meaning, and there is one key in each object, that's a sign that it should be an array.

You could go one step further:

const ingredients = {
  Steak: ["pepper", "salt"],
  Veggies: []
  Fruits: []
};

The name of the data structure makes sense. It is an "ingredients by food" object.

Where you went off is starting with x as the name of the object. x is an unknown. Start by describing everything clearly, and use JetBrains Mono.

If you want to easily iterate over the object using map (like to render a table in React), then you could do:

const ingredients = [
  {Steak: ["pepper", "salt"]},
  {Veggies: []},
  {Fruits: []}
];

or:

const recipes = [
  {food: Steak, ingredients: ["pepper", "salt"]},
  {food: Veggies, ingredients: []},
  {food: Fruits, ingredients: []}
];

(which is close to the reduction I did to your original data)

That one should be called recipes, which I discovered when I wrote this next function and the names didn't make sense if the object were named ingredients.

recipes.forEach(recipe => {
   console.log(`HTML Title: %{recipe.food})
   console.log(`HTML Subtitle: Ingredients`)
   recipe.ingredients.forEach(ingredient => 
      console.log(`* ${ingredient}`)
   )
})

See, the names in the data structure make sense, and so do the functions to work with it. And the data structure itself is small and comprehensible. Structure is also data.

JetBrains Mono.

Answer 2

You can store all ingredientItem in one array and then apply Map on that array:

let ingredientItem = [];
x.forEach((item) => {
    if (item.ingredients) {
        item.ingredients.forEach((ingredient) => {
            for (name in ingredient) {
                ingredientItem.push(ingredient[name])
            }
        })
    }
})

ingredientItem.map((item) => {

})