A Guide To Adding up Values and Assigning Them to Corresponding Objects in Vue

Question

A Guide To Adding up Values and Assigning Them to Corresponding Objects in Vue

Currently, I'm in the process of creating a computed property that will generate a fresh Array of Objects

The challenge I am facing is figuring out how to sum up the number of values that match a specific value and then insert that value into the corresponding object?

The specific value I want to add is count:. My goal is to count the number of objects that correspond to each status value in every workflow object from a separate array named engagements.

In order to showcase what the Array should look like after the computation, take a look below:

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}
                ] 
  },
]

If anyone has any suggestions or can guide me towards a solution for this problem, it would be greatly appreciated! Thanks!

javascript arrays object vue.js

Answer 1

Answer №1

To achieve the desired outcome, it is necessary to utilize Array#reduce on the statuses within each iteration in order to create a new array of statuses without mutating the original. Additionally, you can use Array#filter to iterate through the engagements and tally those that match both the workflow_id and 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'
  },
  ...
];

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);

Answer 2

To achieve the desired outcome, it is necessary to utilize Array#reduce on the statuses within each iteration in order to create a new array of statuses without mutating the original. Additionally, you can use Array#filter to iterate through the engagements and tally those that match both the workflow_id and 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'
  },
  ...
];

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);

Answer 3

Answer №2

Take a look at this code and analyze it!

function calculateTotals(data) {
  const totals = [];
  
  for(const item of data) {
    const existingItem = totals.find(e => e.id === item.id);
    
    if (!existingItem) {
      totals.push({
        id: item.id,
        values: [{
          value: item.value,
          count: 1
        }]
      });
      continue;
    }
    
    const value = existingItem.values.find(v => v.value === item.value);
    
    if (!value) {
      existingItem.values.push({
        value: item.value,
        count: 1
      });
      continue;
    }
    
    value.count += 1;
  }
  
  return totals;
}

Answer 4

Take a look at this code and analyze it!

function calculateTotals(data) {
  const totals = [];
  
  for(const item of data) {
    const existingItem = totals.find(e => e.id === item.id);
    
    if (!existingItem) {
      totals.push({
        id: item.id,
        values: [{
          value: item.value,
          count: 1
        }]
      });
      continue;
    }
    
    const value = existingItem.values.find(v => v.value === item.value);
    
    if (!value) {
      existingItem.values.push({
        value: item.value,
        count: 1
      });
      continue;
    }
    
    value.count += 1;
  }
  
  return totals;
}

A Guide To Adding up Values and Assigning Them to Corresponding Objects in Vue

Answer №1

Answer №2

Similar questions

Webpack returns an undefined error when attempting to add a JavaScript library

I encountered an issue where my button's onClick function was not functioning properly with the clickable component

Step-by-step guide on redirecting a page using AJAX while also sending data to a controller

Generating ChartJS in Real-time

Can you combine multiple user validation rules with express-validator?

Timeout set to run indefinitely

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

How can you turn consecutive if statements into asynchronous functions in JavaScript?

How to invoke a function from a different ng-app in AngularJS

"Encountering an issue with Multer where req.file is displaying as undefined in NodeJS

Setting up CloudKitJS Server-to-Server Communication

Implementing dynamic data binding in JavaScript templates

Sorting arrays in Typescript

Efficiently importing SCSS files into Vue single file components using Webpack without redundancy

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

"What are some strategies for locating a specific item within a MongoDB database, or perhaps querying for all

Utilize Laravel collection to group items in a nested array based on a specific criterion

Is there a way to ensure a dialog box is positioned in the center of the window?

Display resize grip when hovering

Incorporate a JavaScript form into a controller in MVC4