How To Sum Values And Push To Matching Object In Vue

Question

So I am trying to create a computed property that will create a new Array of Objects

My issue is how can I sum the number of values that match a certain value and then push that value into the matching object?

The value I need pushed is count:. I am trying to count the number of objects that match each status value in each workflow object from a separate array called engagements.

I have created a Jsfiddle Click Here

The Array should look like this after being computed

var arr = [
  { workflow_id: 1, 
       statuses: [ 
                  { status: "Received", count: 3},
                  { status: "Review", count: 2},
                  { status: "complete", count: 4}
                ] 
  },
  { workflow_id: 2, 
       statuses: [ 
                  { status: "Received", count: 3},
                  { status: "Review", count: 1},
                  { status: "complete", count: 1}
                ] 
  },
  { workflow_id: 3, 
       statuses: [ 
                  { status: "Received", count: 3},
                  { status: "Data Entry", count: 2},
                  { status: "complete", count: 1}
                ] 
  },
]

any help would be greatly appreciated or a point in a direction that could help me solve this issue! thanks

kemicofa · Accepted Answer · 2018-11-11 19:30:08Z

You needed to use Array#reduce on your statuses to create a new array of statuses (to avoid mutating the original) and then within each iteration to Array#filter through the engagements and count those that match the workflow_id and the status.

const workflows = [{
    id: 1,
    workflow: 'bookeeping',
    statuses: [{
        status: 'Received'
      },
      {
        status: 'Prepare'
      },
      {
        status: 'Review'
      },
      {
        status: 'Complete'
      },
    ]
  },
  {
    id: 2,
    workflow: 'payroll',
    statuses: [{
        status: 'Received'
      },
      {
        status: 'Scan'
      },
      {
        status: 'Enter Data'
      },
      {
        status: 'Review'
      },
      {
        status: 'Complete'
      },
    ]
  },
  {
    id: 3,
    workflow: 'tax preparation',
    statuses: [{
        status: 'Received'
      },
      {
        status: 'Scan'
      },
      {
        status: 'Prep'
      },
      {
        status: 'Review'
      },
      {
        status: 'Complete'
      },
    ]
  },
];
const engagements = [{
    engagement: '1040',
    workflow_id: 1,
    status: 'Received'
  },
  {
    engagement: '1040',
    workflow_id: 1,
    status: 'Received'
  },
  {
    engagement: '1040',
    workflow_id: 1,
    status: 'Review'
  },
  {
    engagement: '1040',
    workflow_id: 2,
    status: 'Review'
  },
  {
    engagement: '1040',
    workflow_id: 2,
    status: 'Complete'
  },
  {
    engagement: '1040',
    workflow_id: 2,
    status: 'Complete'
  },
  {
    engagement: '1040',
    workflow_id: 3,
    status: 'Prep'
  },
  {
    engagement: '1040',
    workflow_id: 3,
    status: 'Prep'
  },
  {
    engagement: '1040',
    workflow_id: 2,
    status: 'Enter Data'
  },
  {
    engagement: '1040',
    workflow_id: 2,
    status: 'Enter Data'
  },
  {
    engagement: '1040',
    workflow_id: 2,
    status: 'Enter Data'
  },
  {
    engagement: '1040',
    workflow_id: 1,
    status: 'Prepare'
  },
  {
    engagement: '1040',
    workflow_id: 1,
    status: 'Prepare'
  },
];

const res = workflows.map(({statuses, id}) => ({
  workflow_id: id,
  statuses: statuses.reduce((acc, cur) => {

    const count = engagements.filter(({workflow_id, status}) => workflow_id === id && status === cur.status).length;
    
    if(count === 0) return acc;

    acc.push({status: cur.status, count});

    return acc;
    
  }, [])
}))

console.log(res);

thank you so much for the help. I was trying to make things way to complicated. seeing it like this helps me make more sense of what is happening. Thank you

Konrad · Accepted Answer · 2018-11-11 19:25:11Z

0

Grab the code and analize it :)

function sumProps(arr) {
  const result = []
  for(const el of arr) {
    const obj = result.find(e => e.workflow_id === el.workflow_id)
    if (!obj) {
      result.push({
        workflow_id: el.workflow_id,
        statuses: [{
          status: el.status,
          count: 1
        }]
      })
      continue
    }
    const status = obj.statuses.find(s => s.status === el.status)
    if (!status) {
      obj.statuses.push({
        status: el.status,
        count: 1
      })
      continue
    }
    status.count += 1
  }
  return result
}

answered Nov 11, 2018 at 19:25

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Collectives™ on Stack Overflow

How To Sum Values And Push To Matching Object In Vue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related