Counting true occurences in array and binding them to a variable in angular

Question

I have a set of input fields with checkboxes where the user can choose an option. Then it's saved in local storage as true if checked and false if not. The localStorage under key "passengers" looks like this:

0: {name: "", child: false, luggage: true}
1: {name: "", child: true, luggage: false}
2: {name: "", child: false, luggage: true}
3: {name: "", child: true, luggage: false}

I want to count occurrences of true and store as a number in a variable

public luggageCounter: number;

I was trying to use

this.luggageCounter = countTrue([this.passengers[i].luggage]], true)
console.log(this.luggageCounter)

and const countTrue = (arr, val) => arr.reduce((a, v) => (v === val ? a +1 : a), 0)

but both of these solutions don't work. I was also thinking about making it easier and toggling the value from HTML by adding code below with [ngClass] and binding it with method in component.ts but also with no success.

<div>Extra luggage: {{ passengers[i].luggage ? 'Yes' : 'No' }}<div>

Any ideas how to make this simple task work? I'm out of ideas :)

Mario · Accepted Answer · 2020-07-03 18:59:01Z

1

Please try the following solution

const data = [
  { name: "", child: false, luggage: true },
  { name: "", child: true, luggage: false },
  { name: "", child: false, luggage: true },
  { name: "", child: true, luggage: false },
];

const total = data.reduce((previousValue, currentValue) => {
  if (currentValue.luggage) {
    previousValue += 1;
  }

  return previousValue;
}, 0);

console.log(total);

See

Array.prototype.reduce()

answered Jul 3, 2020 at 18:59

Mario

5,0044 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JoseTurron Over a year ago

Thank you! That's exactly what I was looking for! :)

Collectives™ on Stack Overflow

Counting true occurences in array and binding them to a variable in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related