Как суммировать значения и нажимать на соответствующий объект в Vue

Question

Итак, я пытаюсь создать вычисляемое свойство, которое создаст новый массив объектов

Моя проблема в том, как я могу суммировать число значений, которые соответствуют определенному значению, а затем вставить это значение в соответствующий объект?

Значение, которое мне нужно нажать, равно count:. Я пытаюсь подсчитать количество объектов, соответствующих каждому значению состояния в каждом объекте рабочего процесса, из отдельного массива с именем engagements.

Я создал Jsfiddle Нажмите здесь

Массив должен выглядеть следующим образом после вычисления

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

любая помощь будет принята с благодарностью или указание на направление, которое может помочь мне решить эту проблему! спасибо

Answer 1

Получите код и проанализируйте его:)

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
}

Answer 2

Вам нужно было использовать Array # lower в своих статусах, чтобы создать новый массив статусов (чтобы избежать изменения оригинала), а затем в каждой итерации 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);