Mi título parece un poco confuso,
Aquí está mi problema, quiero desestructurar una matriz de objetos para usar sus propiedades en un gráfico de líneas chartJS.
Aquí hay una matriz reproducida:
[{ "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 }]Cada entrada contiene una fecha (fecha) , un número de visitantes (visitantes) y un nombre de página (página)
Por ejemplo, si tengo 2 fechas y 3 páginas para las que quiero recuperar el número de visitantes por fecha por página. Mi matriz devuelve 6 entradas (3 páginas para cada fecha) el ejemplo anterior .
Entonces, ¿cómo puedo obtener el número de visitas de cada página y obtener una matriz que contenga nombres y fechas de página solo una vez y el número de visitas relacionadas como:
[ { page: pageName, dates: [], numberOfVisits: [], }, { page: pageName, dates: [], numberOfVisits: [], }, { page: pageName, dates: [], numberOfVisits: [] }, ]Intenté reducir la matriz y filtrarla de acuerdo con las fechas o los nombres de las páginas de esta manera:
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;Sugeriría usar Array.reduce() para agrupar fechas y visitantes por página.
Ordenaríamos la matriz de entrada para asegurarnos de que nuestra salida también esté ordenada por fecha.
El acumulador (acc) tendrá una propiedad para cada página, con un nombre de página, una lista de fechas y un arreglo de número de visitas.
Object.values() para obtener la matriz final requerida.
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; } También podría estructurar la salida de forma ligeramente diferente, para tener una matriz de visits , cada elemento con una date y un valor de 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; }