如何访问另一个对象内的对象属性

Question

I have a structure that looks like this:

Customer {
  name: 'jen',
  options:
   [ Order {
       _price: 11,
       _option: 'vegan',
       _name: 'V for Vegan',
       _ingredients:
        [ Ingredient { name: 'mint', price: 0.5 },
          Ingredient { name: 'peanuts', price: 0.5 } ] },
     Order {
       _price: 11,
       _option: 'vegetarian',
       _name: 'Veggie',
       _ingredients: [] } ] }

I'm having a hard time logging out this part:

_ingredients:
            [ Ingredient { name: 'mint', price: 0.5 },
              Ingredient { name: 'peanuts', price: 0.5 } ] },

I can get to log out this:

Options: vegan
[object Object],[object Object]

Options: vegetarian

But I would like it to be something like

Options: vegan
mint, peanuts

My last attempt was looping through _ingredients but it is returning undefined. My code so far:

getBill() {
      let totalPrice = 0;

      console.log(`
        Your current bill:
        `)

      this.options.forEach((i) => {
        console.log(`
          Option: ${i._option}
          Extra Ingredients: ${i._ingredients.forEach((j) => {j.name})}
        `)
        totalPrice += i._price;
      })

      console.log(`
        Total Price: ${totalPrice} $
        `)
    }

Answer 1

It's a JavaScript function error as forEach doesn't actually return anything useful. If you read the documentation you'll see the return value is explicitly specified as undefined , which is what you're probably getting. You'll need to do something with that, like join them together.

Extra Ingredients: ${i._ingredients.map(_i => _i.name).join(', ')}

Using Lodash or Underscore will give you a map function that takes a string as well:

Extra Ingredients: ${_.map(i._ingredients, 'name').join(', ')}

That actually returns the values you want, it plucks out the name property, which you can then give a cosmetic treatment with the join to combine it into a well-formed string list.