是否可以总结objects数组的属性并根据另一个属性过滤它？

Question

我的标题好像有点乱，

这是我的问题，我想解构一个 objects 的数组，以便在 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
}]

每个条目包含一个日期(date)，一个访问者数量(访问者) 和页面名称 （页面）

例如，如果有 2 个日期和 3 个页面，我想为其检索每个日期每个页面的访问者数量。我的数组 returns 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; }

是否可以总结objects数组的属性并根据另一个属性过滤它？

is it possible to sum up the properties of an array of objects and to filter it according to another property?

javascript

arrays

sorting

destructuring

chart.js