How to loop through an object in an array to count the element in VueJS?

Question

I have this array that contains an object which has 4 elements in it:

Task 3: [
   {
    "action_3": 1, 
    "action_4": 1, 
    "action_5": 0, 
    "action_6": 0 
   } 
]

I have got to this point by doing this:

this.Task3 = this.actions.map(item => {
          return {
            action_3: item.action_3,
            action_4: item.action_4,
            action_5: item.action_5,
            action_6: item.action_6
          }
        })

For the next part I would like to check many 1's exist - the result should be 2.

This is my code so far:

task3Progress() {
      for (const key of this.Task3) {
        const task3length = Object.keys(key).length

        //should print 2 to console
        console.log(Object.values(key).reduce(
        (count, value) => count + (compare === value ? 1 : 0),
        0) 
    );

       //prints 4 to screen
       return task3length 
      }
    },

I would like to do 2 things:

1) return a count of 4 for the number of elements that exist
2) do a check for how many 1's exits, and return a 2

How do I do this?

Answer 1

Try like this, Hope you will achieve the result.

task3Progress() {
      for (var i=0;i<Task3.length;i++){
       // will print 4 in console
       console.log(Object.keys(Task3[i]).length);
       let values= Object.values(Task3[i]);
       var equaToOne = values.filter(function (item) {
          return item == 1;
       })
      // will print 2 in console
        console.log(equaToOne.length); 
        return equaToOne.length;
      }
 }

Below i have attached code snippet too. You can check the result.

var Task3 = [
   {
    "action_3": 1, 
    "action_4": 1, 
    "action_5": 0, 
    "action_6": 0 
   } 
];

//console.log(Object.keys(Task3[0]).length);
for (var i=0;i<Task3.length;i++){
  console.log(Object.keys(Task3[i]).length);
  let values= Object.values(Task3[i]);
  var equalToOne = values.filter(function (item) {
	return item == 1;
})
  console.log(equalToOne.length); 
}// expected output: 4

Answer 2

check this out.

var task_3 = [
   {
    "action_3": 1, 
    "action_4": 1, 
    "action_5": 0, 
    "action_6": 0 
   } 
] ;
var key_count = 0 ;
var one_count = 0 ;

var print_keys = function() {
  for(action in task_3[0]){
    key_count++
    if(task_3[0][action] == 1){
    one_count++
    }
  }
  console.log('key_count = ',key_count, '& one_count=', one_count)
}

<button onclick="print_keys()">print</button>

Answer 3

This actually has nothing to do specifically with vuejs. It’s only basic javascript:

const actions = [{
    "action_3": 1,
    "action_4": 1,
    "action_5": 0,
    "action_6": 0
}];

function countActions() {
    return Object.keys(actions[0]).length;
}

function countOccurences(compare) {
    return Object.values(actions[0]).reduce(
        (count, value) => count + (compare === value ? 1 : 0),
        0
    );
}

Then call countActions() and countOccurences(1).