how to populate array of objects from another array of objects?

Question

I have an array

FruitsList = [
                {name: 'apple', color: 'red'}, 
                {name: 'grapes', color: 'violet'}, 
                {name:'avocado', color: 'green'}
            ] 

Next I want to fill another array of objects

Food = [{fruitName: '', fruitColor:''}] 

from all the values of the previous array. I tried mapping but failed. Can anyone help what approach in Javascript or Typescript I can use?

Answer 1

Try this:

const Food = FruitsList.map(({name, color}) => {
  return { fruitName: name, fruitColor: color };
})

console.log(Food);

Answer 2

why won't you try this

const FruitsList = [{name: 'apple', color: 'red'}, {name: 'grapes', color: 'violet'}, {name:'avocado', color: 'green'}]

const Food = [...FruitsList , {fruitName: '', fruitColor:''}]

Answer 3

Something like this?

food = [];
var list = [
  { name: "apple", color: "red" },
  { name: "grapes", color: "violet" },
  { name: "avocado", color: "green" }
];
list.forEach(function(element) {
  food.push({ fruitName: element.name, fruitColor: element.color });
});
console.log(food);

Answer 4

You can use the map() operator to accomplish this and return a new array the way you like. Please find more about the javascript map operator here

    FruitsList = [{name: 'apple', color: 'red'}, {name: 'grapes', color: 'violet'}, {name:'avocado', color: 'green'}]
    let Food = FruitsList.map(({name, color}) => {
      return { fruitName: name, fruitColor: color };
    })

    console.log(Food);