JavaScript 如何將對象數組中的值獲取到數組數組中，以便每個子數組對來自類似鍵的值進行分組？

Question

我有一個基於用戶輸入的對象數組，例如：

const sortedByDate = [
  { Date: '2020-05-03', Genre: 'History', PageViews: '34' },
  { Date: '2010-01-16', Genre: 'History', PageViews: '10' },
  { Date: '1975-04-23', Genre: 'Literature', PageViews: '27' },
  { Date: '1997-10-14', Genre: 'History', PageViews: '3' },
  { Date: '1990-08-22', Genre: 'Literature', PageViews: '42' },
  { Date: '2001-06-13', Genre: 'Literature', PageViews: '64' }
]

如何將 PageView 值放入數組數組中，以便每個子數組代表一個流派？ 例如：

const chartData = [
  [ 34, 10, 3 ],  // These are the PageView values from the Genre 'History'
 [ 27, 42, 64 ]  // These are the PageView values from the Genre 'Literature'
]

上面的 sortedByDate 數組將具有基於用戶輸入的任意數量的元素，而 chartData 數組需要具有基於“流派”數量的任意數量的子數組

Answer 1

可以通過使用Array.reduce和Object.values來實現預期的輸出

 const sortedByDate = [ { Date: '2020-05-03', Genre: 'History', PageViews: '34' }, { Date: '2010-01-16', Genre: 'History', PageViews: '10' }, { Date: '1975-04-23', Genre: 'Literature', PageViews: '27' }, { Date: '1997-10-14', Genre: 'History', PageViews: '3' }, { Date: '1990-08-22', Genre: 'Literature', PageViews: '42' }, { Date: '2001-06-13', Genre: 'Literature', PageViews: '64' } ] const getFormattedData = (data) => { const finalRes = data.reduce((res, { Genre, PageViews }) => { if (res[Genre]) { res[Genre].push(PageViews) } else { res[Genre] = [PageViews] } return res; }, {}); return Object.values(finalRes); } console.log(getFormattedData(sortedByDate))

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

Answer 2

您可以使用Genre屬性作為鍵將對象數組縮減為數組對象。 使用Object.values()將對象轉換為數組：

 const sortedByDate = [{"Date":"2020-05-03","Genre":"History","PageViews":"34"},{"Date":"2010-01-16","Genre":"History","PageViews":"10"},{"Date":"1975-04-23","Genre":"Literature","PageViews":"27"},{"Date":"1997-10-14","Genre":"History","PageViews":"3"},{"Date":"1990-08-22","Genre":"Literature","PageViews":"42"},{"Date":"2001-06-13","Genre":"Literature","PageViews":"64"}] const fn = (data) => Object.values( // convert to an array of arrays data.reduce((r, { Genre, PageViews }) => { r[Genre] = r[Genre] || [] // create key by Genre if doesn't exist r[Genre].push(PageViews) // push to Genre key array return r; }, {}) ); const result = fn(sortedByDate) console.log(result)

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