是否可以总结对象数组的属性并根据另一个属性对其进行过滤？

Question

我的标题似乎有点混乱，

这是我的问题，我想解构一个对象数组，以便在 chartJS 折线图中使用它的属性。

这是一个复制的数组：

[{
    "page": "Page 1",
    "date": "2021-10-05",
    "visitors": 10
}, {
    "page": "Page 2",
    "date": "2021-10-05",
    "visitors": 20
}, {
    "page": "Page 3",
    "date": "2021-10-05",
    "visitors": 30
},{
    "page": "Page 1",
    "date": "2021-10-04",
    "visitors": 40
}, {
    "page": "Page 2",
    "date": "2021-10-04",
    "visitors": 50
}, {
    "page": "Page 3",
    "date": "2021-10-04",
    "visitors": 60
}]

每个条目都包含一个日期（日期）、一个访问者编号（访问者）和一个页面名称（页面）

例如，如果一个有 2 个日期和 3 个页面，我想为其检索每个日期每个页面的访问者数量。我的数组返回 6 个条目（每个日期 3 页）上面的示例。

那么如何获取每个页面的访问次数并获得一个包含页面名称和日期的数组仅一次以及相关的访问次数，例如：

[   {
        page: pageName,
        dates: [],
        numberOfVisits: [],
    },
    {
        page: pageName,
        dates: [],
        numberOfVisits: [],
    },
    {
        page: pageName,
        dates: [],
        numberOfVisits: []
    },
]

我尝试减少数组并根据日期或页面名称对其进行过滤，如下所示：

myArray.reduce((a, c) => {
    /* Filtering by date but this returns only one page name */
    let filtered = a.filter(el => (el.date === c.date));

    /* OR Filtering by page name but this returns only oneDate for each */
    /* let filtered = a.filter(el => (el.page === c.page)); */

    if (filtered.length > 0) {
        /* summing up the number of visits => this works in both cases */
        a[a.indexOf(filtered[0])].m_unique_visitors += +c.m_unique_visitors;

    } else {
        a.push(c);
    }
})
return a;

Answer 1

我建议使用Array.reduce() 按页面对日期和访问者进行分组。

我们会对输入数组进行排序，以确保我们的输出也按日期排序。

累加器 (acc) 将为每个页面提供一个属性，包括页面名称、日期列表和访问次数数组。

我们将使用Object.values() 来获得所需的最终数组。

const a = [{ "page": "Page 1", "date": "2021-10-05", "visitors": 10 }, { "page": "Page 2", "date": "2021-10-05", "visitors": 20 }, { "page": "Page 3", "date": "2021-10-05", "visitors": 30 },{ "page": "Page 1", "date": "2021-10-04", "visitors": 40 }, { "page": "Page 2", "date": "2021-10-04", "visitors": 50 }, { "page": "Page 3", "date": "2021-10-04", "visitors": 60 }]

const sortByDate = ({ date: a}, { date:b }) => Date.parse(a) - Date.parse(b);

const result = Object.values(a.sort(sortByDate).reduce((acc, { page, date, visitors}) => { 
    acc[page] = acc[page] || { page, dates: [], numberOfVisits: []};
    acc[page].dates.push(date);
    acc[page].numberOfVisits.push(visitors);
    return acc;
}, {}))

console.log('Result:', result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

您还可以稍微不同地构造输出，以拥有一个 visits 数组，每个元素都有一个 date 和 visitors 值。

const a = [{ "page": "Page 1", "date": "2021-10-05", "visitors": 10 }, { "page": "Page 2", "date": "2021-10-05", "visitors": 20 }, { "page": "Page 3", "date": "2021-10-05", "visitors": 30 },{ "page": "Page 1", "date": "2021-10-04", "visitors": 40 }, { "page": "Page 2", "date": "2021-10-04", "visitors": 50 }, { "page": "Page 3", "date": "2021-10-04", "visitors": 60 }]
   
const sortByDate = ({ date: a}, { date:b }) => Date.parse(a) - Date.parse(b);

const result = Object.values(a.sort(sortByDate).reduce((acc, { page, date, visitors}) => { 
    acc[page] = acc[page] || { page, visits: [] };
    acc[page].visits.push( { date, visitors});
    return acc;
}, {}));

console.log('Result:', result);

.as-console-wrapper { max-height: 100% !important; top: 0; }