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>

x is an array, so you can map it directly. no need for Object.keys. The ingredients is also an array although with a weird format. It would be better for ingredients to be an array of strings or at least objects with the same schema. No need to change the name of the ingredient item property — Gabriele Petrioli
– Gabriele Petrioli, Commented Feb 22, 2020 at 10:54
Yes, I agree with above comment. And what you want to do after iteratiing ingredients array. means want to add an html element or what ? — Nipun Jain
– Nipun Jain, Commented Feb 22, 2020 at 10:57
@GabrielePetrioli can you please show me the better format for ingredients? — missing_one
– missing_one, Commented Feb 22, 2020 at 11:16

Josh Wulf · Accepted Answer · 2020-02-22 11:51:44Z

4

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.

edited Feb 22, 2020 at 11:51

answered Feb 22, 2020 at 11:21

Josh Wulf

4,9122 gold badges24 silver badges35 bronze badges

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

9 Comments

missing_one Over a year ago

What if I need to have another nested array on the ingredients?

Josh Wulf Over a year ago

No problem: what is it called?

missing_one Over a year ago

Say I have this: ` ingredients: curry: powder, flavoring, coloring `

Josh Wulf Over a year ago

What is that called? I get that the curry is an "ingredient". What is the sub-array called?

missing_one Over a year ago

What do you mean called? I'll name it as an additive of that particular ingredient

|

Arnaud Claudel · Accepted Answer · 2020-02-22 11:18:55Z

0

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) => {

})

edited Feb 22, 2020 at 11:18

Arnaud Claudel

3,16821 silver badges26 bronze badges

answered Feb 22, 2020 at 11:09

harsh_apache

4334 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using map in a multidimensional array Javascript

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related