For Loop items aren't adding into basket

user_14277107 0
Viewed 104

My sumUpItems function works well. However, I am having problems with adding up items into basket. The second function isn't working. What I am doing wrong?

  sumUpItems() {
      let sum = 0;
      for (const item of this.basketItems) {
        sum += Number.parseFloat(item.price);
      }
      return sum;
    },
    basketCount() {
      let count = 0;
      for (let item of this.basketItems) {
        count = ++item;
      }
      return count;
    }
  }
vuejs2 vue.js javascript
3 Answers

sumUpItems()

You can simplify the sumUpItems by using the reduce function which you can call on an array this.basketItems.

The most short way is:

sumUpItems() {
  return this.basketItems.reduce((totalPrice, basketItem) => totalPrice + basketItem.price, 0);
}

What the reduce function does is it executes a reducer function on each element of the array, resulting in single output value, in this case the totalPrice of all basketItems.

if you are more comfortable with brackets you could write it down like this:

sumUpItems() {
  return this.basketItems.reduce((totalPrice, basketItem) => {
    return totalPrice + basketItem.price;
  }, 0);
}

Or in ES5 javascript (without arrow function):

sumUpItems() {
  return this.basketItems.reduce(function(totalPrice, basketItem) {
    return totalPrice + basketItem.price;
  }, 0);
}

I recommend you to rename the sumUpItems() function name to getTotalPrice() or something like that, it describes more specifically what the function does and returns.

BasketCount()

The reason why basketCount() is not returning the correct amount of items is because the incrementation of the variable count is invalid. let item holds the object value of the array item inside this.basketItems and you are trying to add this object to a number.

What you can do is return the length of the this.basketItems directly by writing:

basketCount() {
  return this.basketItems.length;
}

Extra information

Reduce function documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

There are some powerfull methods that you can call on an array.

Most commonly the map, filter and reduce method. The reduce method is a bit tricky when you start using them but they can be handy in cases like this.

I recommend you to read this article on medium: https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d or search on google for map,filter and reduce javascript arrays, it will help you a lot ;)

user_75025020

If you rewrote this section like so: it will work

 basketCount() {
      let count = 0;
      for (let item of this.basketItems) {
        ++count;
      }
      return count;
    }

But a better way of doing this will do like so:

let d = 0;
let p = arr.map(eachone => d++); //p contains your count

Another option using forEach:

let arr = [1,2,3,4,5]; //replace arr with this.baskets
let b = 0;
arr.forEach((eachone) => {
    b++
});

LASTLY: if you dont want to create an unused variable:

let baskets = [1,2,3,4,5];
let p = 0;
for(i=0; i<=baskets.length; i++) {
    p++;
}
return p;

Welcome to stackover flow :)

user_25515910

Check the code very well, in basketCount() function the count variable is not incrementing and besides you increment item by 1 before assigning its value into count;

Are you planning doing something like this;

count += ++item;

or

count += item;

It will be better if you can include code for basketItems also;

user_98661740
Related