使用JavaScript过滤器,如何通过从同一数组中动态获取月份来编写此代码?

问题描述 投票:0回答:1
        let janFilteredData = YearlyExpense.filter((data) => {
        return data.month === "January"
    })
    let febFilteredData = YearlyExpense.filter((data) => {
        return data.month === "February"
    })
    let marFilteredData = YearlyExpense.filter((data) => {
        return data.month === "March"
    })
    .
    .
    .
    . 
    .

    let decFilteredData = YearlyExpense.filter((data) => {
        return data.month === "December"
    })

由于我要显示当前每个月的条形图,所以我需要将该值作为每个月的支出总数传递给c3图表。

YearlyExpense数组是;

const MonthlyExpense = [{
UserID: "1",
UserName: "George",
MonthlyExpenseDetails:[
    {
        TotalAmount: "70000",
        TotalNoOfBills: 16,
        ExpenseTypeDetails: [
            {
                BillType: "Taxi",
                NoOfBills: 4,
                Amount: "30000",
                Approved: {
                    TotalAmount: 10000,
                    TotalNoOfBills: 1
                },
                Rejected: {
                    TotalAmount: 10000,
                    TotalNoOfBills: 0
                },
                Pending: {
                    TotalAmount: 10000,
                    TotalNoOfBills: 3
                }
            },
            {
                BillType: "Food",
                NoOfBills: 4,
                Amount: "10000",
                Approved: {
                    TotalAmount: 10000,
                    TotalNoOfBills: 1
                },
                Rejected: {
                    TotalAmount: 0,
                    TotalNoOfBills: 0
                },
                Pending: {
                    TotalAmount: 0,
                    TotalNoOfBills: 3
                }
            },
            {
                BillType: "Fine",
                NoOfBills: 4,
                Amount: "30000",
                Approved: {
                    TotalAmount: 10000,
                    TotalNoOfBills: 1
                },
                Rejected: {
                    TotalAmount: 0,
                    TotalNoOfBills: 0
                },
                Pending: {
                    TotalAmount: 20000,
                    TotalNoOfBills: 3
                }
            }
        ]
    },
]},

{
UserID: "2",
UserName: "Figo",
MonthlyExpenseDetails:[
    {
        TotalAmount: "80000",
        TotalNoOfBills: 16,
        ExpenseTypeDetails: [
            {
                BillType: "Taxi",
                NoOfBills: 4,
                Amount: "30000",
                Approved: {
                    TotalAmount: 10000,
                    TotalNoOfBills: 1
                },
                Rejected: {
                    TotalAmount: 0,
                    TotalNoOfBills: 0
                },
                Pending: {
                    TotalAmount: 20000,
                    TotalNoOfBills: 3
                }
            },
            {
                BillType: "Food",
                NoOfBills: 4,
                Amount: "10000",
                Approved: {
                    TotalAmount: 0,
                    TotalNoOfBills: 1
                },
                Rejected: {
                    TotalAmount: 5000,
                    TotalNoOfBills: 0
                },
                Pending: {
                    TotalAmount: 5000,
                    TotalNoOfBills: 3
                }
            },
            {
                BillType: "Fine",
                NoOfBills: 4,
                Amount: "7100",
                Approved: {
                    TotalAmount: 6000,
                    TotalNoOfBills: 1
                },
                Rejected: {
                    TotalAmount: 100,
                    TotalNoOfBills: 0
                },
                Pending: {
                    TotalAmount: 1000,
                    TotalNoOfBills: 3
                }
            }
        ]
    },
]}]

export const YearlyExpense = [
{ month: "January", expense: MonthlyExpense },
{ month: "February", expense: MonthlyExpense },
{ month: "March", expense: MonthlyExpense },
{ month: "April", expense: MonthlyExpense },
{ month: "May", expense: MonthlyExpense },
{ month: "June", expense: MonthlyExpense },
{ month: "July", expense: MonthlyExpense },
{ month: "August", expense: MonthlyExpense },
{ month: "September", expense: MonthlyExpense },
{ month: "October", expense: MonthlyExpense },
{ month: "November", expense: MonthlyExpense },
{ month: "December", expense: MonthlyExpense }]

我正在为react c3js图形生成此数据。在这种情况下,如何在不重复如上所述的代码的情况下,根据各个月份获取数据。

javascript reactjs c3.js
1个回答
0
投票

您可以尝试这样的事情:

function monthlyFilteredData(yearlyExpense,month){
  return yearlyExpense.filter(data => data.month === month)
}

let janFilteredData = monthlyFilteredData(yearlyExpense, 'January')
© www.soinside.com 2019 - 2024. All rights reserved.