JavaScript 如何将对象数组中的值获取到数组数组中，以便每个子数组对来自类似键的值进行分组？

Question

I have an array of objects based on user input, for example:

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' }
]

How can I get the PageView values into an array of arrays such that each sub-array represents one Genre? For example:

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'
]

The sortedByDate array above will have an arbitrary number of elements based on user input, and the chartData array needs to have an arbitrary number of sub-arrays based on the number of "Genres"

Answer 1

The expected output can be achieved by using Array.reduce and 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

You can reduce the array of objects to an object of arrays using the Genre property as the key. Convert the object to an array using 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; }