Home > OS >  How to use .map to add a new property to an array of objects
How to use .map to add a new property to an array of objects

Time:10-17

trying to use underscore.map to iterate over array of objects and add a boolean property to each object based on if the object value passes a truth statement.

var desserts = [
  {
    name: 'Chocolate Cake',
    ingredients: ['cocoa', 'flour', 'sugar', 'eggs', 'milk', 'butter' ],
    type: 'cake'
  },
  {
    name: 'Snickerdoodles',
    ingredients: ['flour', 'milk', 'butter', 'eggs', 'sugar', 'cinnamon', 'cream of tartar'],
    type: 'cookie'
  }, 

etc..

Heres what I have -

var glutenFree = function (desserts) {
  return _.map(desserts, function(dessert) {
    if (dessert.ingredients.includes('flour')) {
      return dessert.glutenFree = 'false';
    } else {
      return dessert.glutenFree = 'true';
    }
  });
};

CodePudding user response:

No library needed:

const desserts = [{
    name: 'Chocolate Cake',
    ingredients: ['cocoa', 'flour', 'sugar', 'eggs', 'milk', 'butter'],
    type: 'cake'
  },
  {
    name: 'Snickerdoodles',
    ingredients: ['flour', 'milk', 'butter', 'eggs', 'sugar', 'cinnamon', 'cream of tartar'],
    type: 'cookie'
  }
];

const dessertsExtended = desserts.map(dessert => ({ ...dessert,
  glutenfree: !dessert.ingredients.includes('flour')
}));

console.log(dessertsExtended);

CodePudding user response:

You just need to set the properties. Then return the element in the map function, so it gets added to the array.

var glutenFree = function (desserts) {
  return _.map(desserts, function(dessert) {
    if (dessert.ingredients.includes('flour')) {
      dessert.glutenFree = 'false';
      return dessert;
    } else {
     dessert.glutenFree = 'true';
     return dessert;
    }
  });
};

Though I'd make some adjustments.

  • Instead of the string values 'true' and 'false', you can use the boolean values true and false.
  • You don't need to use the word "function", you can use lambda format instead
  • var is rarely used nowadays, use let or const instead.
  • If you only use the if-else statement to assign stuff, you can also use the ternary operator <condition> ? <statement> : <statement>
const glutenFree = (desserts) => {
  return _.map(desserts, (dessert) => {
    dessert.glutenFee = dessert.ingredients.includes('flour')
      ? false
      : true;
    return dessert;
  });
};

Of course, dessert.ingredients.includes('flour') itself is also a boolean value that is either true or false. So you could make the function even shorter by using the boolean value of this statement. If it includes flower, it is not gluten-free. So add a ! in front to negate the boolean:

const glutenFree = (desserts) => {
  return _.map(desserts, (dessert) => {
    dessert.glutenFee = !dessert.ingredients.includes('flour');
    return dessert;
  });
};

CodePudding user response:

The map creates a new array with the value that you pass in the return statement. In your case, return dessert.glutenFree = 'false'; is considered just as false, and return dessert.glutenFree = 'true'; is considered as true. Resulting in a array with just ['false', 'false'].

To return the whole object, you need to modify it and then return the whole object, here's the refactored function:

var glutenFree = function (desserts) {
  return desserts.map(function(dessert) {
    if (dessert.ingredients.includes('flour')) {
      dessert.glutenFree = 'false'; // modifying the object
    } else {
      dessert.glutenFree = 'true'; // modifying the object
    }

    return dessert; // returning the whole object
  });
};
  • Related