Guide to utilizing Reduce for obtaining a fresh Array of Objects in Javascript

Question

Guide to utilizing Reduce for obtaining a fresh Array of Objects in Javascript

I am a beginner in coding, so I apologize if this question seems basic. I am working with an array that contains different types of pies along with their prices:

pieArr = [blueberry, strawberry, pumpkin, apple]

My goal is to create an array of objects representing the total cost of the shopping cart based on the pie prices. A helpful user on stack overflow suggested using the reduce method for this task.

Here is my current code snippet:

var total = 0;

const totalArr = pieArr.reduce((totalPrice, pie) => {
  if ( pie === "blueberry") {
    total += 2.5;
    totalPrice.push({["cartTotal"]:total});
    return totalPrice;
  }
 else if (pie === "apple") {
   total += 2;
   totalPrice.push({["cartTotal"]:total});
   return totalPrice;
 }, 
 [])};

My desired outcome is a new array of objects that continuously accumulates the total cost:

[{cartTotal:2.5},{cartTotal:4.5}]

Although the new array of objects is created, the total amount is not being properly calculated, resulting in both totals being 0:

[{cartTotal: 0},{cartTotal: 0}]

I am struggling to figure out what I am doing wrong. Any guidance would be appreciated.

javascript arrays loops object

Answer 1

Answer №1

An effective method to achieve this is by implementing a price lookup system, such as the following:

let piePrices = {
    blueberry: 2.25,
    strawberry: 1.5, 
    pumpkin: 3,
    apple: 2
}

With this in place, you can utilize the map() method (which is more efficient than using reduce() when creating an array from an existing array), eliminating the need for extensive if/else statements:

let piePrices = {
    blueberry: 2.25,
    strawberry: 1.5, 
    pumpkin: 3,
    apple: 2
}

let pieArr = ['blueberry', 'strawberry', 'pumpkin', 'apple']

let total = 0
let totalPrice = pieArr.map(pie =>  ({cartTotal: total += piePrices[pie]}))

console.log(totalPrice)

Answer 2

An effective method to achieve this is by implementing a price lookup system, such as the following:

let piePrices = {
    blueberry: 2.25,
    strawberry: 1.5, 
    pumpkin: 3,
    apple: 2
}

With this in place, you can utilize the map() method (which is more efficient than using reduce() when creating an array from an existing array), eliminating the need for extensive if/else statements:

let piePrices = {
    blueberry: 2.25,
    strawberry: 1.5, 
    pumpkin: 3,
    apple: 2
}

let pieArr = ['blueberry', 'strawberry', 'pumpkin', 'apple']

let total = 0
let totalPrice = pieArr.map(pie =>  ({cartTotal: total += piePrices[pie]}))

console.log(totalPrice)

Answer 3

Answer №2

const total = 0;
let pieArr = ['blueberry', 'strawberry', 'pumpkin', 'apple']
const totalArr = pieArr.reduce((totalPrice, pie) => {
  let foundPie = totalPrice.find(x => x.name === pie) || {name: pie, total: 0};
  
 if ( pie === "blueberry") {
    foundPie.total += 2.5;
 }
 else if (pie === "apple") {
   foundPie.total += 2;
 }
 
 if(!totalPrice.some(x=>x.name === pie)){
   totalPrice.push(foundPie)
 }
  return totalPrice;
}, []);

console.log(totalArr)

Consider adding a name attribute for better clarity. Within the reduce function, search for the pie in the accumulated totalPrice array, then calculate the sum and check whether to add the element to the accumulated array.

Answer 4

const total = 0;
let pieArr = ['blueberry', 'strawberry', 'pumpkin', 'apple']
const totalArr = pieArr.reduce((totalPrice, pie) => {
  let foundPie = totalPrice.find(x => x.name === pie) || {name: pie, total: 0};
  
 if ( pie === "blueberry") {
    foundPie.total += 2.5;
 }
 else if (pie === "apple") {
   foundPie.total += 2;
 }
 
 if(!totalPrice.some(x=>x.name === pie)){
   totalPrice.push(foundPie)
 }
  return totalPrice;
}, []);

console.log(totalArr)

Consider adding a name attribute for better clarity. Within the reduce function, search for the pie in the accumulated totalPrice array, then calculate the sum and check whether to add the element to the accumulated array.

Guide to utilizing Reduce for obtaining a fresh Array of Objects in Javascript

Answer №1

Answer №2

Similar questions

The initial attempt at using Ajax inside onbeforeunload is unsuccessful

Mastering Vue 3: Simplifying a reactive array of objects while maintaining reactivity

Purge precise LocalStorage data in HTML/JavaScript

Utilizing JavaScript to handle the value from a selected form

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

Using a JavaScript variable to be displayed in a PHP code

Discover content within nested arrays - angularJS

Leveraging the power of AJAX with either jquery or plain javascript to parse nested JSON data and display the

Attach the element to the bottom of the viewport without obstructing the rest of the page

Transferring documents using JavaScript

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Enhancing Vuejs Security: Best Practices and Tips for Secure Development

Clickable Angular Material card

Understanding the concept of "this" within a callback situation

Differentiating the texture of a pointCloud in three.js shaderMaterial: A step-by-step guide

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

HTML link with "mailto:" not opening in a new tab

The process of uploading a file is interrupted by an AJAX Timeout

Validating the length of form inputs and selected items from a dropdown menu

retrieve data from an asynchronous request