i'm new developer in Vue JS.
below is my response body, and i wanted to sum amount values that has is_paid:true with paid_amount only.. is there a way to do this in Vue JS?
EDit: for ex sum 30 (amount) + 20 (paid_amount) with out 100 since it has is_paid:false
{
"payment" : {
"installment_payment" : {
"installments" : [
amount:30,
date: "",
is_paid: true,
},
{
amount: 100,
date: "",
is_paid: false,
},
{
amount: "",
date: "",
is_paid: false,
},
{
amount: "",
date: "",
is_paid: true,
}
],
remaining: ""
},
paid_amount: 20,
},
}Filter for paid installments....
let installments = apiResponse.payment.installment_payment.installments;
let paidInstallments = installments.filter(obj => obj.is_paid);
Sum using reduce...
let totalPaid = paidInstallments.reduce((sum, obj) => sum + parseInt(obj.amount), 0);
Demo...
let installments = [
{ amount:5, is_paid:true }, { amount:10, is_paid:false },
{ amount:15, is_paid:true }, { amount:20, is_paid:false }
];
// 5 and 15 are paid, so sum should be 20
let paidInstallments = installments.filter(obj => obj.is_paid);
let totalPaid = paidInstallments.reduce((sum, obj) => sum + parseInt(obj.amount), 0);
console.log(totalPaid);You could also filter and reduce in one go, like this...
// filter all installments and assign 0 as the payment when is_paid is false
let totalPaid = installments.reduce((sum, obj) => {
const amountPaid = obj.is_paid ? parseInt(obj.amount) : 0;
return sum + amountPaid;
}, 0);
console.log(totalPaid);