I have the following array of food that has a corresponding array of recipes like this.
let book = [{
food: "Bread",
ingredients: [
'wheat',
'water',
'eggs'
]
},{
food: "Cake",
ingredients: [
'flour',
'milk',
'eggs',
'chocolate'
]
}]
Lets say that a user needs to update a food in their recipe book and have an array like this
let update = [{
food: "Bread",
ingredients: [
'sesame',
]
}];
If I wanted to update just the ingredients list how would I be able to do so?
The code that I would think to have is
for(let i = 0; i < book.length; i++){
if(update.food === book[i].food){
book[i].ingredients.push(update.ingredients)
}
}
Is this on the right track? I feel like pushing like this on the book creates a new full field. Any help is appreciated.
Thank you
Use ES6 Spred Syntax like this:
book[i].ingredients = [...book[i].ingredients, ...update[0].ingredients]
Also, consider Array.prototype.find() or Array.prototype.indexOf() instead of looping through the array yourself.
This is what you can do to update the ingredients every time user wants to update the recipe.
let book = [{
food: "Bread",
ingredients: [
'wheat',
'water',
'eggs'
]
},{
food: "Cake",
ingredients: [
'flour',
'milk',
'eggs',
'chocolate'
]
}]
let update = [{
food: "Bread",
ingredients: [
'sesame',
]
}];
for (let i =0; i < book.length; i++) {
if (update[0]['food'] === book[i]['food']) {
book[i]['ingredients'].push(...update[0]['ingredients']); // will add all the ingredients
}
}
console.log(book);However, this is not efficient when you have more number of recipes. As every time user wanted to update the recipe you need to iterate the whole array and do updation(O(n)). Instead changing the DS would be good.
let book = {
"Bread": {
ingredients: [
'wheat',
'water',
'eggs'
]
},
"Cake": {
ingredients: [
'flour',
'milk',
'eggs',
'chocolate'
]
}
};
let update = {
"Bread": {
ingredients: [
'sesame',
]
}
};
Object.keys(update).forEach(food => {
const { ingredients } = update[food];
book[food]?.ingredients.push(...ingredients);
});
console.log(book)In the above code, you don't need to iterate through the array instead you can create an update object and run the update only once with all the updates from the user or even when a user updates the update object(on your requirement), but it is more efficient in terms of operations that you wanted to do.
Solution using Array.prototype.find()
book.find(element => element.food === update[0].food).ingredients.push(update[0].ingredients);