我的標題似乎有點混亂，
這是我的問題，我想解構一個物件陣列，以便在 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）、一個訪問者編號（visitors）和一個頁面名稱（page）
例如，如果有 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;
uj5u.com熱心網友回復：
我建議使用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; }轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/351239.html
標籤：javascript 数组 排序 图表.js 解构