How to change a value in nested array

Question

Code:

let fruits = [{
    name: 'apple',
    attributes: [{
        type: 'Granny Smith',
        color: 'green',
        isFavorite: true
      },
      {
        type: 'Ambrosia',
        color: 'red',
        isFavorite: true
      }
    ],
    isFavorite: true
  },
  {
    name: 'Pear',
    attributes: [{
        type: 'Asian',
        color: 'brown',
        isFavorite: true
      },
      {
        type: 'White Pear',
        color: 'white',
        isFavorite: false
      }
    ],
    isFavorite: true
  },
]

const fruitChecked = fruits.map(fruit => {
  return { ...fruit,
    isFavorite: true
  }
})

const fruitAttributesChecked = fruitChecked.map(fruit => {


  (fruit.attributes).map(attr => {
    return { ...attr,
      isFavorite: true
    }

  })
})

console.log(fruits)
console.log(fruitChecked)
console.log(fruitAttributesChecked)

I am trying to change ALL the isFavorite value to true within each object and the isFavorite value within attributes to true.

However I'm getting something similar to this for [undefined,undefined] for fruitAttributesChecked

The outcome I desire is below for fruitAttributesChecked

fruitAttributesChecked =
[
   {name: 'apple', 
    attributes: [
          {type: 'Granny Smith', color:'green', isFavorite: true},
          {type: 'Ambrosia', color:'red', isFavorite: true}
    ], 
     isFavorite: true
   },
   {name: 'Pear', 
    attributes: [
          {type: 'Asian', color:'brown', isFavorite: true},
          {type: 'White Pear', color:'white', isFavorite: false}
    ], 
     isFavorite: true
   },
]

What am I missing here?

Sorry new to this. That makes sense, I have to return ``` (fruit.attributes).map(attr => { return { ...attr, isFavorite: true } ``` — Cartileo
– Cartileo, Commented Aug 18, 2021 at 23:04

Spectric · Accepted Answer · 2021-08-18 23:13:14Z

4

You can use a nested map() to return a modified attributes array in the object.

let fruits = [{
    name: 'apple',
    attributes: [{
        type: 'Granny Smith',
        color: 'green',
        isFavorite: true
      },
      {
        type: 'Ambrosia',
        color: 'red',
        isFavorite: true
      }
    ],
    isFavorite: true
  },
  {
    name: 'Pear',
    attributes: [{
        type: 'Asian',
        color: 'brown',
        isFavorite: true
      },
      {
        type: 'White Pear',
        color: 'white',
        isFavorite: false
      }
    ],
    isFavorite: true
  },
]

const fruitChecked = fruits.map(fruit => ({ ...fruit,
  isFavorite: true,
  attributes: fruit.attributes.map(attribute => ({ ...attribute,
    isFavorite: true
  }))
}))

console.log(fruitChecked);

edited Aug 18, 2021 at 23:13

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

answered Aug 18, 2021 at 23:07

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

Michael Mano · Accepted Answer · 2021-08-18 23:09:10Z

1

const mappedFruits = fruits.map(fruit => {
    return {
        ...fruit,
        isFavorite: true,
        attributes: attributes.map(attribute => {
            return {
                ...attribute,
                isFavorite: true,
            }
        })
    }
})

answered Aug 18, 2021 at 23:09

Michael Mano

3,4582 gold badges16 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to change a value in nested array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related