Develop Reference

Group Array of Objects to Year and Month by Date

Given the following Array of Objects:
[{
"id": 1,
"name": "random_name1",
"published_at": "2021-01-16T08:52:24.408Z",
},
{
"id": 2,
"name": "random_name2",
"published_at": "2022-02-16T08:52:24.408Z",
},
{
"id": 3,
"name": "random_name3",
"published_at": "2020-04-16T08:52:24.408Z",
},
{
"id": 4,
"name": "random_name4",
"published_at": "2020-04-16T08:52:24.408Z",
},
{
"id": 5,
"name": "random_name5",
"published_at": "2022-05-16T08:52:24.408Z",
}
]
I need to group the items in one array of nested objects (descending) by Year and Month, result should be:
[
{
year: '2022',
months: [
{
month: '5',
items: [
{
id: '5',
name: 'random_name5'
}
]
},
{
month: '2',
items: [
{
id: '2',
name: 'random_name2'
}
]
}
]
},
{
year: '2021',
months: [
{
month: '1',
items: [
{
id: '1',
name: 'random_name1'
}
]
},
{
month: '2',
items: [
{
id: '2',
name: 'random_name2'
}
]
}
]
},
{
year: '2020',
months: [
{
month: '4',
items: [
{
id: '3',
name: 'random_name3'
},
{
id: '4',
name: 'random_name4'
}
]
}
]
}
];
I have tried the following:
items = [...new Set(items.map((item) => parseInt(item.published_at.split('-')[0])))].map((year) => [
{
year: year,
months: [
...new Set(
items
.filter((item) => parseInt(item.published_at.split('-')[0]) === year)
.map((item) => parseInt(item.published_at.split('-')[1]))
)
].map((month) => [
{
month: month,
items: items.filter(
(item) => parseInt(item.published_at.split('-')[0]) === year && parseInt(item.published_at.split('-')[1]) === month
)
}
])
}
]);
return items
The problem with the above solution, is that it will create a two dimensional array like so (months being two dimensional too):
[
[ { year: 2022, months: [Array] } ],
[ { year: 2021, months: [Array] } ],
[ { year: 2020, months: [Array] } ],
[ { year: 2019, months: [Array] } ],
[ { year: 2018, months: [Array] } ]
]
How to fix this?

If you get a unique list of year-months you can use this to map your object
const items = [{ "id": 1,"name": "random_name1","published_at": "2021-01-16T08:52:24.408Z", },
{ "id": 2, "name": "random_name2", "published_at": "2022-02-16T08:52:24.408Z",},
{ "id": 3, "name": "random_name3","published_at": "2020-04-16T08:52:24.408Z",},
{"id": 4, "name": "random_name4", "published_at": "2020-04-16T08:52:24.408Z",},
{ "id": 5, "name": "random_name5", "published_at": "2022-05-16T08:52:24.408Z",}]
let uniqueYearMonths = [... new Set(items.map(x => x.published_at.substring(0,7)))];
let results = [... new Set(items.map(x => x.published_at.substring(0,4)))]
.map(year => ({
year: year,
months: uniqueYearMonths
.filter(ym => ym.startsWith(year))
.map(ym => ({
month: ym.substring(5,7),
items: items
.filter(item => item.published_at.startsWith(ym))
.map(item => ({
id: item.id,
name: item.name
}))
}))
}));
console.log(results);

Given you array as data, you could do something with array methods like map and reduce.
Like this:
const groupedByYear = data.map((e) => ({ ...e, published_at: new Date(e.published_at) }))
.reduce((acc, e) => {
const year = e.published_at.getFullYear();
const month = e.published_at.getMonth() + 1;
if (!acc[year]) acc[year] = { year };
if (!acc[year][month]) acc[year][month] = [];
acc[year][month] = e;
return acc;
}, {})
const result = Object.values(groupedByYear).reduce((acc, e) => {
const { year, ...months } = e;
acc.push({ year: year, months: months });
return acc;
}, [])
This is an example and is probably not the best way to do this. It is only intended to show you a path of data transformations.
First data.map to be able to do operations on dates. Then a reduce to group data (here using an object). Then creating an array from the object values to match the output you want.
Compared to a solution like you showed, there is the advantage that you limit the number of times that you iterate over the array. It is always a good idea to avoid iterating to much time on an array for better performance.

How to sort array of repeated object keys day values and create a new array with object coordinates where y will hold the value of repetitions

Iterating the dates array to create a new array with the following format
const dates= [
{datetime:'Monday'},
{datetime:'Tuesday'},
{datetime:'Wednesday'},
{datetime:'Thursday'},
{datetime:'Monday'},
{datetime:'Wednesday'},
{datetime:'Friday'},
{datetime:'Monday'}]
// Result
result = [ { x: 'Monday', y: 3 },
{ x: 'Tuesday', y: 1 },
{ x: 'Wednesday', y: 2 },
{ x: 'Thursday', y: 1 },
{ x: 'Friday', y: 1 } ]

You could group and count by date then transform it to array of your expectation with map
const dates = [
{ datetime: "Monday" },
{ datetime: "Tuesday" },
{ datetime: "Wednesday" },
{ datetime: "Thursday" },
{ datetime: "Monday" },
{ datetime: "Wednesday" },
{ datetime: "Friday" },
{ datetime: "Monday" },
];
const groupByDatetime = dates.reduce((acc, el) => {
acc[el.datetime] = (acc[el.datetime] || 0) + 1;
return acc;
}, {});
const res = Object.entries(groupByDatetime).map(([datetime, count]) => ({
x: datetime,
y: count,
}));
console.log(res);
Object.entries()

What you are trying to achieve is called grouping.
Idea
Create an object that will hold key(day) and its count
Loop over your data and update the count
At the end, loop over this object and create the final format you need
const dates= [
{datetime:'Monday'},
{datetime:'Tuesday'},
{datetime:'Wednesday'},
{datetime:'Thursday'},
{datetime:'Monday'},
{datetime:'Wednesday'},
{datetime:'Friday'},
{datetime:'Monday'}]
const map = dates.reduce((map, item) => {
map[ item.datetime ] = (map[ item.datetime ] || 0) + 1
return map
}, {});
const result = Object.keys(map).map((key) => ({ x: key, y: map[key] }))
console.log(result)

You could also use the relatively new Array.flat() method to enable the grouping and mapping all in one map.
const dates= [
{datetime:'Monday'},
{datetime:'Tuesday'},
{datetime:'Wednesday'},
{datetime:'Thursday'},
{datetime:'Monday'},
{datetime:'Wednesday'},
{datetime:'Friday'},
{datetime:'Monday'}
]
dates.map((d1, i) => {
if (i === dates.findIndex(d2 => d2.datetime === d1.datetime)) {
return [{
x: d1.datetime,
y: dates.filter(d2 => d2.datetime === d1.datetime).length
}]
} else {
return []
}
})
.flat()
The performance is definitely worse that an Array.reduce() approach. I'm not sure about other considerations though.

you can achieve this using Array.reduce
var dates2 = [
{ datetime: 'Monday' },
{ datetime: 'Tuesday' },
{ datetime: 'Wednesday' },
{ datetime: 'Thursday' },
{ datetime: 'Monday' },
{ datetime: 'Wednesday' },
{ datetime: 'Friday' },
{ datetime: 'Monday' }
]
var result = dates2.reduce((a, c) => {
let entry = a.find(e => e.x == c.datetime);
if (entry) ++entry.y;
else a.push({
x: c.datetime,
y: 1
});
return a;
}, []);
console.log(result );

Go through the items, and build an object with key as datetime.
when same datetime occur, increment values
const combine = (arr, all = {}) => {
arr.forEach(({ datetime: x }) => ((all[x] ??= { x, y: 0 }).y += 1));
return Object.values(all);
};
const dates = [
{ datetime: "Monday" },
{ datetime: "Tuesday" },
{ datetime: "Wednesday" },
{ datetime: "Thursday" },
{ datetime: "Monday" },
{ datetime: "Wednesday" },
{ datetime: "Friday" },
{ datetime: "Monday" },
];
console.log(combine(dates))

How can i return two objects in javascript

As an example
I have two arrays
const tempData = [
{ day: "Mon", temp: 33.6 },
{ day: "Tue", temp: 34.6 },
{ day: "Wed", temp: 33.1 },
{ day: "Fri", temp: 35.6 }
];
const coughData = [
{ day: "Mon", count: 2 },
{ day: "Wed", count: 1 },
{ day: "Thur", count: 1 },
{ day: "Fri", count: 3 },
{ day: "Sat", count: 1 }
];
I need to merge these arrays into one so that if the day matches the count value adds to that object if it doesn't match it adds both objects to the array.
Don't know if the explanation isn't so clear but
The expected result should be like this:
const data = [
{ day: "Mon", temp: 33.6, count: 2 },
{ day: "Tue", temp: 34.6 },
{ day: "Wed", temp: 33.1, count: 1 },
{ day: "Thur", count: 1 },
{ day: "Fri", temp: 35.6, count: 3 },
{ day: "Sat", count: 1 }
];
I am trying to use map function like so but can't understand how do I return both the objects if they don't match:
const data = tempData.map(temp => {
coughData.map(cough => {
if (temp.day === cough.day) {
return (temp.count = cough.count);
} else {
return cough;
}
});
return temp;
});

You could collect all data grouped by day in an object and get the values as result set.
const
addToCollection = (collection, key) => o => Object.assign(collection[o[key]] ??= {}, o),
tempData = [{ day: "Mon", temp: 33.6 }, { day: "Tue", temp: 34.6 }, { day: "Wed", temp: 33.1 }, { day: "Fri", temp: 35.6 }],
coughData = [{ day: "Mon", count: 2 }, { day: "Wed", count: 1 }, { day: "Thur", count: 1 }, { day: "Fri", count: 3 }, { day: "Sat", count: 1 }],
collection = {};
tempData.forEach(addToCollection(collection, 'day'));
coughData.forEach(addToCollection(collection, 'day'));
console.log(Object.values(collection));
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can first merge the objects of the arrays, and then use .reduce() along with a Map to accumulate the values. The Map can be keyed by the day property, which will allow you to group related object properties together. You can then use Array.from() to transform your Map back into an array of objects like so:
const tempData = [{ day: "Mon", temp: 33.6 }, { day: "Tue", temp: 34.6 }, { day: "Wed", temp: 33.1 }, { day: "Fri", temp: 35.6 }];
const coughData = [{ day: "Mon", count: 2 }, { day: "Wed", count: 1 }, { day: "Thur", count: 1 }, { day: "Fri", count: 3 }, { day: "Sat", count: 1 }];
const arr = [...tempData, ...coughData];
const result = Array.from(arr.reduce((map, {day, ...rest}) => {
const seen = map.get(day) || {day};
return map.set(day, {...seen, ...rest});
}, new Map).values());
console.log(result);

let newArray = Array();
let longer = (tempData.length <= coughData.length) ? coughData.length :
tempData.length;
for(let i = 0, j = 0; i < longer; ++i, ++j) {
newArray.push(Object.assign(coughData[i], tempData[j]));
}
Print to console:
[ { day: 'Mon', count: 2, temp: 33.6 },
{ day: 'Tue', count: 1, temp: 34.6 },
{ day: 'Wed', count: 1, temp: 33.1 },
{ day: 'Fri', count: 3, temp: 35.6 },
{ day: 'Sat', count: 1 } ]

const tempData = [
{ day: "Mon", temp: 33.6 },
{ day: "Tue", temp: 34.6 },
{ day: "Wed", temp: 33.1 },
{ day: "Fri", temp: 35.6 }
];
const coughData = [
{ day: "Mon", count: 2 },
{ day: "Wed", count: 1 },
{ day: "Thur", count: 1 },
{ day: "Fri", count: 3 },
{ day: "Sat", count: 1 }
];
const tempRes = [...tempData, ...coughData];
const result = tempRes.reduce((acc, curr) => {
const { day, ...rest } = curr;
acc[day] = acc[day] ? Object.assign({}, acc[day], rest) : curr
return acc;
}, {})
console.log(Object.values(result))
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can use Object.assign() javascript function.
The Object.assign () method is used to copy the values ​​of all the enumerable properties of one or more source objects to a target object. This method will return the target object
Like so:
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Create 2 Dimensional Array from Object with same key

I have an array of objects that I want to transform. My dataset looks like this:
[
{
day: sunday,
val: 20
},
{
day: sunday,
val: 20
},
{
day: monday,
val: 10
},
{
day: monday,
val: 30
},
{
day: tuesday,
val: 5
},
{
day: tuesday,
val: 5
}
]
I am trying to transform the data to look like this:
Output:
[[20,20], [10,30], [5, 5]]
Where each of the nested arrays are based on the Day of Week in object. Any ideas?
Thanks!

You could group your items by their day. After you have the groups, you can grab the values of the map and map the item lists to a list of val.
const data = [
{ day: 'sunday' , val: 20 }, { day: 'sunday' , val: 20 },
{ day: 'monday' , val: 10 }, { day: 'monday' , val: 30 },
{ day: 'tuesday' , val: 5 }, { day: 'tuesday' , val: 5 }
];
const transformed = Object.values(data.reduce((map, item) =>
({ ...map, [item.day] : [ ...(map[item.day] || []), item]
}), {})).map(list => list.map(item => item.val));
console.log(transformed);
.as-console-wrapper { top: 0; max-height: 100% !important; }
Alternatively, you can reduce the values right away, but you lose all the item properties.
const data = [
{ day: 'sunday' , val: 20 }, { day: 'sunday' , val: 20 },
{ day: 'monday' , val: 10 }, { day: 'monday' , val: 30 },
{ day: 'tuesday' , val: 5 }, { day: 'tuesday' , val: 5 }
];
const transformed = Object.values(data.reduce((map, item) =>
({ ...map, [item.day] : [ ...(map[item.day] || []), item.val] }), {}));
console.log(transformed);
.as-console-wrapper { top: 0; max-height: 100% !important; }
Here is a functional version:
const data = [
{ day: 'sunday' , val: 20 }, { day: 'sunday' , val: 20 },
{ day: 'monday' , val: 10 }, { day: 'monday' , val: 30 },
{ day: 'tuesday' , val: 5 }, { day: 'tuesday' , val: 5 }
];
const toMatrix = (list, key, valFn) => Object.values(data.reduce((map, item) =>
({ ...map, [item[key]] : [ ...(map[item[key]] || []), valFn(item) ] }), {}))
console.log(toMatrix(data, 'day', item => item.val));
.as-console-wrapper { top: 0; max-height: 100% !important; }

let myarray=[
{
day: 'sunday',
val: 20
},
{
day: 'sunday',
val: 20
},
{
day: 'monday',
val: 10
},
{
day: 'monday',
val: 30
},
{
day: 'tuesday',
val: 5
},
{
day: 'tuesday',
val: 5
}
];
let newarray=[];
for (let x of myarray) {
if (!newarray[x.day]) { newarray[x.day]=[]; }
newarray[x.day].push(x.val);
}
console.log(newarray);

This could be a solution:
var obj = [
{
day: 'sunday',
val: 20
},
{
day: 'sunday',
val: 20
},
{
day: 'monday',
val: 10
},
{
day: 'monday',
val: 30
},
{
day: 'tuesday',
val: 5
},
{
day: 'tuesday',
val: 5
}
]
var obj_output = [];
var bln_array = false;
for (i=0; i < obj.length; i++) {
var arr = [];
arr.push(obj[i].val);
arr.push(obj[i+1].val);
obj_output.push(arr);
i = i+1
}
console.log(obj_output);

Here's one way to achieve this
var old = [
{ day: 'sunday', val: 20 },
{ day: 'sunday', val: 20 },
{ day: 'monday', val: 10 },
{ day: 'monday', val: 30 },
{ day: 'tuesday', val: 5 },
{ day: 'tuesday', val: 5 }
];
var days = [];
var result = [];
old.forEach(o => {
if(days.indexOf(o.day) === -1) {
days.push(o.day);
result.push([]);
}
result[days.indexOf(o.day)].push(o.val);
});
console.log(result);

Here is an example on stackblitz on how you could achieve that, and here is the code :
import React, { Component } from "react";
import { render } from "react-dom";
import * as _ from "lodash";
const App = () => {
const data = [
{
day: "sunday",
val: 20
},
{
day: "sunday",
val: 20
},
{
day: "monday",
val: 10
},
{
day: "monday",
val: 30
},
{
day: "tuesday",
val: 5
},
{
day: "tuesday",
val: 5
}
];
const groupBy = (arr, prop) => {
const map = new Map(Array.from(arr, obj => [obj[prop], []]));
arr.forEach(obj => map.get(obj[prop]).push(obj.val));
return Array.from(map.values());
};
React.useEffect(() => {
// groupBy from Lodash does not do exaclty what you want (but still very interesting), need to work on it a bit
let chunks = Object.values(_.groupBy(data, 'day')).map(x => x.map(item => item.val));
console.log(chunks);
// Exactly what you want, but custom made by someone here :
// https://stackoverflow.com/a/53704154/9868549
console.log(groupBy(data, 'day'));
}, []);
return <div>This is a template react</div>;
};
render(<App />, document.getElementById("root"));
I found it here on another StackOverflow thread but still wanted to provide another solution with lodash.

Finding all objects with Max value in a property within an Array of Objects and return values of other property from the same object

I know there are similar questions here, but with those methods only one max value is returned. What I need is to determine which objects of the array have that max value in a given property and return the value of a certain (other) property within those objects that have the max value in the given property.
I have this array of objects called week with two properties "name" and "traffic" :
[
{ name: "Saturday", traffic: 12 },
{ name: "Sunday", traffic: 12 },
{ name: "Monday", traffic: 13 },
{ name: "Tuesday", traffic: 9 },
{ name: "Wednesday", traffic: 10 },
{ name: "Thursday", traffic: 8 },
{ name: "Friday", traffic: 13 },
]
​
In this case Monday and Friday have the max value for the property "Traffic" which is 13 and I need a way to return a string containing the name of the day with highest "Traffic" value if there is only one day, and an array containing the names (as strings) of the days that have highest "Traffic" value if there are more than one day with highest "Traffic" value, as in this case would return an array containing Monday and Friday.
I have tried this:
function getMaxTr() {
return week.reduce((max, p) => p.traffic > max ?
p.traffic : max, week[0].traffic);
}
But with this I only got one max value of the property "traffic" which is 13.
And this:
let max = week [week.length - 1];
With this last one I get one object which has the max traffic value, like this:
Object { name: "Friday", traffic: 13 }

You can use reduce. In every iteration, check if there's either an element with a lower or an equal traffic property in your result, if so either replace the whole thing for the former case, or add the equal element to your result. If none of above returns true, simply return the last iteration's element again.
const arr = [
{ name: "Saturday", traffic: 12 },
{ name: "Sunday", traffic: 12 },
{ name: "Monday", traffic: 13 },
{ name: "Tuesday", traffic: 9 },
{ name: "Wednesday", traffic: 10 },
{ name: "Thursday", traffic: 8 },
{ name: "Friday", traffic: 13 },
];
let res = arr.reduce((a, b) => {
let now = a.pop();
if (now.traffic < b.traffic) return [b];
if (now.traffic === b.traffic) return [...a, now, b];
return [...a, now];
}, [arr[0]]).map(e => e.name);
res = res.length > 1 ? res : res[0];
console.log(res);

Well if you want to return the name of the objects with max traffic value, you can use a combination of Array#filter(), Array#reduce() and Array#map() methods like this:
let maxTraffic = arr.reduce(function(a, b) {
return a.traffic > b.traffic ? a.traffic : b.traffic;
});
var result = arr.filter(a => a.traffic == maxTraffic).map(a => a.name);
This will return an array containing the names of elements with max traffic value.
Demo:
This is a working demo:
var arr = [
{ name: "Saturday", traffic: 12 },
{ name: "Sunday", traffic: 12 },
{ name: "Monday", traffic: 13 },
{ name: "Tuesday", traffic: 9 },
{ name: "Wednesday", traffic: 10 },
{ name: "Thursday", traffic: 8 },
{ name: "Friday", traffic: 13 },
];
let maxTraffic = arr.reduce(function(a, b) {
return a.traffic > b.traffic ? a.traffic : b.traffic;
});
var result = arr.filter(a => a.traffic == maxTraffic).map(a => a.name);
console.log(result);

You can use the function reduce to group the days and the function pop in case the reduce array contains only one element.
var array = [ { name: "Saturday", traffic: 12 }, { name: "Sunday", traffic: 12 }, { name: "Monday", traffic: 13 }, { name: "Tuesday", traffic: 9 }, { name: "Wednesday", traffic: 10 }, { name: "Thursday", traffic: 8 }, { name: "Friday", traffic: 13 }],
reduced = array.reduce((a, {name, traffic}) => {
if (traffic > a.highest) {
a.current = [name];
a.highest = traffic;
} else if (traffic === a.highest) a.current.push(name);
return a;
}, {highest: 0, current: []}).current,
result = reduced.length === 1 ? reduced.pop() : reduced;
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
This code snippet shows the result as String when the sample contains only one object with the highest traffic value:
var array = [ { name: "Saturday", traffic: 12 }, { name: "Sunday", traffic: 12 }, { name: "Monday", traffic: 1 }, { name: "Tuesday", traffic: 9 }, { name: "Wednesday", traffic: 10 }, { name: "Thursday", traffic: 8 }, { name: "Friday", traffic: 13 }],
reduced = array.reduce((a, {name, traffic}) => {
if (traffic > a.highest) {
a.current = [name];
a.highest = traffic;
} else if (traffic === a.highest) a.current.push(name);
return a;
}, {highest: 0, current: []}).current,
result = reduced.length === 1 ? reduced.pop() : reduced;
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }