如何在 Vue 中求和并推送到匹配的对象

Posted 2023-02-22

【中文标题】如何在 Vue 中求和并推送到匹配的对象

【英文标题】：How To Sum Values And Push To Matching Object In Vue

【发布时间】：2019-04-14 13:56:09

【问题描述】：

所以我正在尝试创建一个计算属性，它将创建一个新的对象数组

我的问题是如何将匹配某个值的值的数量相加，然后将该值推送到匹配对象中？

我需要推送的值为count:。我正在尝试从名为engagements 的单独数组中计算与每个工作流对象中的每个状态值匹配的对象数量。

我创建了一个 Jsfiddle Click Here

计算后的数组应该是这样的

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

我们将不胜感激任何帮助或指出可以帮助我解决此问题的方向！谢谢

【参考方案1】：

您需要在您的状态上使用Array#reduce 来创建一个新的状态数组（以避免改变原始状态），然后在每次迭代中通过参与到Array#filter 并计算与workflow_id 和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);

【讨论】：

非常感谢您的帮助。我试图让事情变得复杂。看到这样有助于我更了解正在发生的事情。谢谢

【参考方案2】：

获取代码并分析它:)

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