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.
Related
I have the following Array
[
{ Month: '2021-05', Count: 36 },
{ Month: '2021-06', Count: 1048 },
{ Month: '2021-07', Count: 572 },
{ Month: '2021-09', Count: 3 },
{ Month: '2021-12', Count: 52 },
{ Month: '2022-01', Count: 4 },
{ Month: '2022-02', Count: 273 },
{ Month: '2022-04', Count: 96 }
]
where I am missing a few months. I know how many months is needed (could be 12 or could be more or less) and I need the missing months (like 2021-08 in this case) to be added with a count of 0. How to go about it?
Here's a pure, functional approach which will create a new array with new items, inserting all of the missing months in order. The code includes some comments explaining the procedure:
const parseDate = str => str.split('-').map(Number);
const formatDate = (year, month) => `${year}-${String(month).padStart(2, '0')}`;
function createContinuousMonthCounts (array) {
const all = [];
// get initial year/month values from first item
let [year, month] = parseDate(array[0].Month);
const advanceDate = () => {
month += 1;
if (month > 12) {
year += 1;
month = 1;
}
};
for (const item of array) {
const [y, m] = parseDate(item.Month);
// while the current month is not equal to the current item's month,
// create an entry for the month, append it, and advance to the next month
while (year !== y || month !== m) {
all.push({Month: formatDate(year, month), Count: 0});
advanceDate();
}
// after we're up to date, add the current item and advance the date
all.push({...item});
advanceDate();
}
return all;
}
const array = [
{ Month: '2021-05', Count: 36 },
{ Month: '2021-06', Count: 1048 },
{ Month: '2021-07', Count: 572 },
{ Month: '2021-09', Count: 3 },
{ Month: '2021-12', Count: 52 },
{ Month: '2022-01', Count: 4 },
{ Month: '2022-02', Count: 273 },
{ Month: '2022-04', Count: 96 },
];
const all = createContinuousMonthCounts(array);
for (const {Month, Count} of all) console.log(Month, Count);
Just a shot into the dark (please consider adding some Code to your question):
const months = [
{ Month: '2021-05', Count: 36 },
{ Month: '2021-06', Count: 1048 },
{ Month: '2021-07', Count: 572 },
{ Month: '2021-09', Count: 3 },
{ Month: '2021-12', Count: 52 },
{ Month: '2022-01', Count: 4 },
{ Month: '2022-02', Count: 273 },
{ Month: '2022-04', Count: 96 }
];
const neededMonths = [
"2021-01","2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08","2021-09","2021-10","2021-11","2021-12"
]
const missedMonths = [];
months.map( m => {
if(neededMonths.indexOf(m.Month) == -1 ){
missedMonths.push(m.Month);
}
});
console.log(missedMonths);
You first need a method to find all the months between a range, then iterate across all the months and add the missing ones with count: 0:
const months = [
{ Month: '2021-05', Count: 36 },
{ Month: '2021-06', Count: 1048 },
{ Month: '2021-07', Count: 572 },
{ Month: '2021-09', Count: 3 },
{ Month: '2021-12', Count: 52 },
{ Month: '2022-01', Count: 4 },
{ Month: '2022-02', Count: 273 },
{ Month: '2022-04', Count: 96 }
]
const firstMonth = months.at(0).Month;
const lastMonth = months.at(-1).Month;
const [initialYear, initialMonth] = firstMonth.split('-');
const [endingYear, endingMonth] = lastMonth.split('-');
const allMonths = [];
let currentMonth = initialMonth;
let currentYear = initialYear;
while (`${currentYear}-${(''+currentMonth).padStart(2, '0')}` !== lastMonth) {
allMonths.push(`${currentYear}-${(''+currentMonth).padStart(2, '0')}`);
currentMonth++;
if (currentMonth === 13) {
currentMonth = 1;
currentYear++;
}
}
allMonths.forEach(month => {
if (!months.find(m => m.Month === month)) {
months.push({Month: month, count: 0});
}
});
console.log(months);
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))
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
I have a requirement to group an array of objects based on time interval. The input looks like:
[
{
_id: {
hour: 0,
interval: '0'
},
time: '0:0',
count: 10
},
{
_id: {
hour: 0,
interval: '15'
},
time: '0:15',
count: 5
},
{
_id: {
hour: 0,
interval: '30'
},
time: '0:30',
count: 1
},
{
_id: {
hour: 0,
interval: '45'
},
time: '0:45',
count: 2
},
{
_id: {
hour: 1,
interval: '0'
},
time: '1:0',
count: 4
},
{
_id: {
hour: 1,
interval: '15'
},
time: '1:15',
count: 3
},
{
_id: {
hour: 1,
interval: '30'
},
time: '1:30',
count: 5
},
{
_id: {
hour: 1,
interval: '45'
},
time: '1:45',
count: 1
}
]
My desired output:
[
{
"time": "0",
"0": 10,
"15": 5
"30": 1,
"45": 2
},
{
"time": "1",
"0": 4,
"15": 3
"30": 5,
"45": 1
}
]
I tried to use the following code to group the objects, which works to an extent, but I'm stuck on what to do next:
const a = [ { _id: { hour: 0, interval: '0' }, time: '0:0', count: 10 }, { _id: { hour: 0, interval: '15' }, time: '0:15', count: 5 }, { _id: { hour: 0, interval: '30' }, time: '0:30', count: 1 }, { _id: { hour: 0, interval: '45' }, time: '0:45', count: 2 }, { _id: { hour: 1, interval: '0' }, time: '1:0', count: 4 }, { _id: { hour: 1, interval: '15' }, time: '1:15', count: 3 }, { _id: { hour: 1, interval: '30' }, time: '1:30', count: 5 }, { _id: { hour: 1, interval: '45' }, time: '1:45', count: 1 }]
var group = a.reduce((r, a) => {
console.log("a", a);
console.log('r', r);
r[a._id.hour] = [...r[a._id.hour] || [], a];
return r;
}, {});
console.log("group", group);
Check if the object with that hour exists in the accumulator object first - if it doesn't, create one, then assign count to that object's [interval] property, and get the Object.values at the end to turn it back into an array:
const input=[{_id:{hour:0,interval:"0"},time:"0:0",count:10},{_id:{hour:0,interval:"15"},time:"0:15",count:5},{_id:{hour:0,interval:"30"},time:"0:30",count:1},{_id:{hour:0,interval:"45"},time:"0:45",count:2},{_id:{hour:1,interval:"0"},time:"1:0",count:4},{_id:{hour:1,interval:"15"},time:"1:15",count:3},{_id:{hour:1,interval:"30"},time:"1:30",count:5},{_id:{hour:1,interval:"45"},time:"1:45",count:1}];
const groupedObj = {};
for (const { _id: { hour, interval }, count } of input) {
if (!groupedObj[hour]) {
groupedObj[hour] = { time: hour };
}
groupedObj[hour][interval] = count;
}
const output = Object.values(groupedObj);
console.log(output);
Reduce the array, and create an object for each _id.time. Assign the current [interval] = count to the object. Get the entries, and use Array.from() to convert the entries to an array of the required form:
const arr = [{"_id":{"hour":0,"interval":"0"},"time":"0:0","count":10},{"_id":{"hour":0,"interval":"15"},"time":"0:15","count":5},{"_id":{"hour":0,"interval":"30"},"time":"0:30","count":1},{"_id":{"hour":0,"interval":"45"},"time":"0:45","count":2},{"_id":{"hour":1,"interval":"0"},"time":"1:0","count":4},{"_id":{"hour":1,"interval":"15"},"time":"1:15","count":3},{"_id":{"hour":1,"interval":"30"},"time":"1:30","count":5},{"_id":{"hour":1,"interval":"45"},"time":"1:45","count":1}];
// convert the entries to an array
const result = Array.from(Object.entries(
arr.reduce((r, o) => {
const { hour, interval } = o._id; // get the hour and interval
if(!r[hour]) r[hour] = {}; // create a the hour object
r[hour][interval] = o.count; // add the interval and count
return r;
}, {})
), ([time, values]) => ({ time, ...values })); // generate the result objects
console.log(result)
You can group object by reduce method. So at first you need to group by hour and then just add interval properties from each iteration of reduce method to the hour property:
const result = arr.reduce((a, c) => {
a[c._id.hour] = a[c._id.hour] || {};
a[c._id.hour].time = c._id.hour;
a[c._id.hour][c._id.interval] = c.count;
return a;
}, {})
console.log(result);
An example:
let arr = [
{
_id: {
hour: 0,
interval: '0'
},
time: '0:0',
count: 10
},
{
_id: {
hour: 0,
interval: '15'
},
time: '0:15',
count: 5
},
{
_id: {
hour: 0,
interval: '30'
},
time: '0:30',
count: 1
},
{
_id: {
hour: 0,
interval: '45'
},
time: '0:45',
count: 2
},
{
_id: {
hour: 1,
interval: '0'
},
time: '1:0',
count: 4
},
{
_id: {
hour: 1,
interval: '15'
},
time: '1:15',
count: 3
},
{
_id: {
hour: 1,
interval: '30'
},
time: '1:30',
count: 5
},
{
_id: {
hour: 1,
interval: '45'
},
time: '1:45',
count: 1
}
]
const result = arr.reduce((a, c) => {
a[c._id.hour] = a[c._id.hour] || {};
a[c._id.hour].time = c._id.hour;
a[c._id.hour][c._id.interval] = c.count;
return a;
}, {})
console.log(result);
I need to transform a array of multiple object in one array object,
I explain myself, I wish to group for each table the objects that carry the same "month" and replace the properties that have the same value by adding their ID at the beginning:
ex:
quantity: 1
becomes fpsIssuedQuantity (in camelCase). http://jsfiddle.net/rLjQx/96589/
here are my data :
var data = {
"2018-01": [
{ id:"fpsIssued", month:"2018-01", quantity:"28" },
{ id:"dgfipIncome", month:"2018-01", amount:1350 },
{ id:"antaiPaidFps", month:"2018-01", quantity:2242 }
],
"2018-02": [
{ id: "fpsIssued", month: "2018-02", quantity: "29" },
{ id: "dgfipIncome", month: "2018-02", amount: 8530 },
{ id: "antaiPaidFps", month: "2018-02", quantity: 4857}
]
};
console.log(data);
and the expected data :
var expectedData = {
"2018-01": [
{ month: "2018-01", fpsIssuedquantity: "28",
dgfipIncomeamount: 1350, antaiPaidFpsQuantity: 2242
}
],
"2018-02": [
{ month: "2018-02", fpsIssuedquantity: "29",
dgfipIncomeamount: 8530, antaiPaidFpsQuantity: 4857
}
]
};
console.log(expectedData);
i use lodash and angularjs but i can not get my result .. please could you help me?
You could map new objects with wanted new property names and values in new objects.
var data = { "2018-01": [{ id: "fpsIssued", month: "2018-01", quantity: "28" }, { id: "dgfipIncome", month: "2018-01", amount: 1350 }, { id: "antaiPaidFps", month: "2018-01", quantity: 2242 }], "2018-02": [{ id: "fpsIssued", month: "2018-02", quantity: "29" }, { id: "dgfipIncome", month: "2018-02", amount: 8530 }, { id: "antaiPaidFps", month: "2018-02", quantity: 4857 }] },
result = Object.assign(
...Object
.entries(data)
.map(
([k, v]) => ({ [k]: Object.assign(...v.map(o => ({ month: o.month, [o.id + ('quantity' in o ? 'Quantity' : 'Amount')]: 'quantity' in o ? o.quantity : o.amount }))) })
)
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }