Related
I have some query result data like..
"results": [
{
"activityId": "7",
"universityId": "23",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-10T22:25:29.798Z"
},
{
"activityId": "6",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-09T23:48:23.554Z"
},
{
"activityId": "5",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-08T23:48:21.841Z"
}
]
Now I need to filter the data like:
[
{
title: 2022-04-10 (here createdAt value),
value: {
"activityId": "5",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat"
}
}
]
I am using nestJS.
const allActivity = [];
Promise.all(
results.map((value) => {
if (allActivity.length <= 0) {
const obj = {
title: value.createdAt,
values: value,
};
allActivity.push(obj);
}
}),
);
I just need to filter the data with this format or just need to complete my function that I have written below.
You can simply use
select * from data where createdAt like '2022-04-10%'
The returned table with this query will be in the same format that you need.
try this map function
const results = [{
"activityId": "7",
"universityId": "23",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-10T22:25:29.798Z"
},
{
"activityId": "6",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-09T23:48:23.554Z"
},
{
"activityId": "5",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-08T23:48:21.841Z"
}
]
const mapped = results.map(({
createdAt,
...value
}) => {
return {
title: createdAt.split('T')[0],
value
}
})
console.log(mapped)
You can check this implementation with reduce
const results = [{
"activityId": "7",
"universityId": "23",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-10T22:25:29.798Z"
},
{
"activityId": "6",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-09T23:48:23.554Z"
},
{
"activityId": "5",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-08T23:48:21.841Z"
}, {
"activityId": "8",
"universityId": "17",
"studentId": "25",
"content": "New testing",
"activityType": "chat",
"createdAt": "2022-04-08T23:48:21.841Z"
}
]
//format your date from `2022-04-08T23:48:21.841Z` to `2022-04-08`
const formatDate = (date) => date.split('T')[0]
const finalResult = results
.reduce((finalList, item) => {
const currentItemFormattedDate = formatDate(item.createdAt)
const foundItem = finalList.find(addedItem => formatDate(addedItem.title) === currentItemFormattedDate)
//if it's not in the final list, we need to create a new title
if (!foundItem) {
finalList.push({
title: currentItemFormattedDate,
value: [{
...item
}]
})
} else {
//if it's in the final list, we just need to push value
foundItem.value.push({
...item
})
}
return finalList
}, [])
console.log(finalResult)
The easier way with groupBy, but instead of title, I'm using keys for date representation
const results = [{
"activityId": "7",
"universityId": "23",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-10T22:25:29.798Z"
},
{
"activityId": "6",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-09T23:48:23.554Z"
},
{
"activityId": "5",
"universityId": "17",
"studentId": "25",
"content": "Add course in cart",
"activityType": "chat",
"createdAt": "2022-04-08T23:48:21.841Z"
}, {
"activityId": "8",
"universityId": "17",
"studentId": "25",
"content": "New testing",
"activityType": "chat",
"createdAt": "2022-04-08T23:48:21.841Z"
}
]
const formatDate = (date) => date.split('T')[0]
//groupBy is not fully supported for all browsers, so I use vanilla Javascript for it
const groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
const finalResult = groupBy(results.map(item => ({...item, createdAt: formatDate(item.createdAt)})), "createdAt")
console.log(finalResult)
Assuming you want to group by createdAt by trimming time.
const results = [{activityId:"6",universityId:"17",studentId:"25",content:"Add course in cart",activityType:"chat",createdAt:"2022-04-09T23:48:23.554Z"},{activityId:"5",universityId:"17",studentId:"25",content:"Add course in cart",activityType:"chat",createdAt:"2022-04-08T23:48:21.841Z"},{activityId:"9",universityId:"11",studentId:"26",content:"Add course in cart",activityType:"chat",createdAt:"2022-04-08T23:48:21.841Z"}];
const map = new Map();
for (const ele of results) {
const date = new Intl.DateTimeFormat('en-GB', {
dateStyle: 'medium',
}).format(new Date(ele.createdAt));
if (map.has(date)) {
map.set(date, [ele, ...map.get(date)]);
continue;
}
map.set(date, [ele]);
}
const output = Object.fromEntries(map.entries());
console.log(output);
I make a graph with NextJs and ChartJs on the stats of the covid (over the last 30 days) that I get with an API that provides me with the date and the stats :
timeline: {
cases: {
'5/13/21': 5902343,
'...' : ...
},
}
I managed to make the graph but I would like to place the date returned for each stats on the X line of my label
I managed to do this code (lineData is't my request) :
labels: [Object.keys(lineData.timeline.cases)],
but it shows me all the dates as one and the same object.
For now my label looks like this
labels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
and I would like to replace values with the one provided by the api
Object.keys returns an array. So currently you have an array of array like:
labels: [ ['5/13/21'] ]
You can just do:
labels: Object.keys(lineData.timeline.cases) // labels: ['5/13/21']
the first one is a global list of products (say 10 products) that each product contains a code and a quantity greater than or equal to 0. (this is important)
the second is a list of products (say 3) that each product contains a code (the same as in the first table) and a quantity equal to 0.
I want to filter the first array and have an array with 3 product but keep the quantities of the first one
for example:
state.Data = [
{
"code": "0",
"qte": "0"
},
{
"code": "1",
"qte": "0"
},
{
"code": "2",
"qte": "14"
},
{
"code": "3",
"qte": "14"
},
{
"code": "4",
"qte": "0"
},
{
"code": "5",
"qte": "0"
},
{
"code": "6",
"qte": "0"
},
{
"code": "7",
"qte": "0"
},
{
"code": "8",
"qte": "0"
},
{
"code": "9",
"qte": "0"
}
];
action.value.Data = [
{
"code": "0",
"qte": "0"
},
{
"code": "2",
"qte": "0"
},
{
"code": "3",
"qte": "0"
}
];
// what I want:
result = [
{
"code": "0",
"qte": "0"
},
{
"code": "2",
"qte": "14"
},
{
"code": "3",
"qte": "14"
}
];
the difference between action.value.Data and result is qte of each product.
I had tried:
const mainData = [...action.value.Data,...state.Data];
var catData = mainData.reduce((p, c) => {
p[c.code] = (p[c.code] || 0) ;
return p;
}, {});
var result = mainData.filter((obj) => {
return catData[obj.code] >= 0;
});
nextState = {
...state,
Data: result,
}
but the result table gives me 6 products instead of 3 (always double) and the qte is always 0, so how to filter the state.Data array and keep only the products which have the same code as in the action.value.Data array
I can not understand the logic of your code actually. Solution is extremely simple
// step 1: getting keys
const keys = action.value.Data.map(v => v.code)
// step 2: filter values with these keys
const values = state.Data.filter(v => keys.includes(v.code))
That's it
This can be easily done with one liner. All you want to do is filter the first array checking which items are on the second array:
const result = state.Data.filter(({code}) =>
action.value.Data.some(x => x.code === code))
console.log(result)
You get exactly the value you want.
const state = {Data:[
{"code": "0","qte": "0"},{"code": "1","qte": "0"},{"code": "2","qte": "14"},{"code": "3","qte": "14"},
{"code": "4","qte": "0"},{"code": "5","qte": "0"},{"code": "6","qte": "0"},{"code": "7","qte": "0"},
{"code": "8","qte": "0"},{"code": "9","qte": "0"}
]},
action = {value:{Data:[
{"code": "0","qte": "0"},{"code": "2","qte": "0"},{"code": "3","qte": "0"}
]}};
const res = state.Data.filter(o=>action.value.Data.some(a=>a.code==o.code));
console.log(res)
You can just filter the global products based on the codes in action.value.Data but you can also try the below solution to avoid nested loops.
Create a map with code as keys, qte as values and use it while mapping the action.value.Data.
const global = [{
"code": "0",
"qte": "0"
},
{
"code": "1",
"qte": "0"
},
{
"code": "2",
"qte": "14"
},
{
"code": "3",
"qte": "14"
},
{
"code": "4",
"qte": "0"
},
{
"code": "5",
"qte": "0"
},
{
"code": "6",
"qte": "0"
},
{
"code": "7",
"qte": "0"
},
{
"code": "8",
"qte": "0"
},
{
"code": "9",
"qte": "0"
}
];
const bla = [{
"code": "0",
"qte": "0"
},
{
"code": "2",
"qte": "0"
},
{
"code": "3",
"qte": "0"
}
];
const codeVsQty = new Map(global.map(({code, qte}) => [code, qte]));
const result = bla.map(({code}) => ({code, qte: codeVsQty.get(code)}));
console.log(result)
I am developing a Pool betting app. Everything looks good and Im finishing the final module on it.
In firebase, I have a POOL of bets, that have many users. Any user has many matches with their betting on the matches. Like this:
When I do a request on the firebase like this:
fetchPoolData = async () => {
const { firebaseApp } = this.props;
await firebaseApp
.database()
.ref(`/pools/${this.props.location.state.pool.key}/users`)
.once("value")
.then(snapshot => {
this.setState({
poolData: this.snapshotToArray(snapshot),
isLoadingPool: false
});
});
};
Everything Looks great. Now I have an array of users, and want to make some calculations to get the points each user did on each match. So Im mapping the users like this:
this.props.poolData.map(user => {
allUserMatches.push(calculatePoints(user.matches, outcomeMatches));
});
The issue here is that user.matches IS NOT being retrieved as an array. Instead, its coming like a big json object that I can map and make my math to calculate the points.
How can I map this element? If I do a Object.keys I only got a object like this:
Object.keys(user.matches)
(66) ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "result", "topscorer"
And If I do a Object.entries, it is still not very usefull (because I need to do a find on the objects of the array, to get the elements filtered by an atribute of the object).
Object.entries(user.matches)
(66) [Array(2), Array(2), Array(2), Array(2)
Im lost here. What to do?
If you want to use such mapping you can go with
Object.keys(user.matches).map(key => user.matches[key])
Above will return you keys from each object which later on can be used in map of object through their keys.
Also it doesn't return as array as you have two wild properties (result and topscorer) that doesn't work like array indexes so it need to return them as Object instead of an Array
A way to retrieve all values without result and topscorer from that key value pair
Object.keys(user.matches).filter(key => Number.isInteger(parseInt(key))).map(key => user.matches[key]).
This will transform the object with number indices (type string) to the array you want:
Object.keys(user.matches).reduce((arr, key) => {
arr[parseInt(key)] = user.matches[key]
return arr
}, [])
How can I make popups show up in leaflet that I plot using this code?
leaflet(df) %>%
addTiles() %>%
setView(-119.09, 43.70, zoom = 5) %>%
addCircles(~long, ~lat, popup=df$hrus, color="#ffa500") %>%
addLegend("bottomright", colors= "#ffa500", labels="HRUs", title="P")
I can see the dots, but nothing shows up on the popup (Inside RStudio view pane). I tried saving it as HTML, but the saved page neither has the basemap nor the popup
How can I do it?
dput(df)
structure(list(lat = structure(c(41.26124, 41.45247, 41.50923,
41.57602, 41.62999, 41.60664, 41.63508, 41.83411, 41.84721, 41.84382,
41.83294, 41.85096, 41.60179, 41.8572, 41.64224, 41.85058, 41.14342,
41.77109, 41.35783, 41.39253, 41.78496, 41.5982, 41.66492, 41.70302,
41.56481, 41.55544, 41.59929, 41.71257, 41.85876, 41.42739, 41.39722,
41.76483, 41.49387, 41.46879, 41.50355, 41.95393, 41.8932, 41.96956,
41.76675, 41.93061, 41.93767, 41.53439, 41.51667, 41.50472, 41.5053,
41.67506, 41.68689, 41.78533, 41.79546, 41.87722), .Dim = 50L),
long = structure(c(-116.21489, -114.91972, -114.74541, -114.72553,
-114.83965, -114.81267, -114.84702, -113.49586, -113.48851,
-113.46151, -113.45017, -113.38449, -114.91356, -113.41496,
-114.85369, -113.50472, -116.21671, -114.25468, -116.32436,
-116.18391, -114.23875, -115.05154, -114.95098, -114.99438,
-115.75044, -115.89944, -115.84581, -114.9099, -114.19781,
-116.59131, -116.53819, -114.07782, -116.38066, -116.4347,
-116.33524, -113.51231, -113.51787, -113.55034, -114.96587,
-113.34303, -113.24616, -116.28699, -116.60549, -116.63497,
-116.55531, -115.19046, -114.72527, -114.64668, -114.54489,
-113.59969), .Dim = 50L), hrus = structure(1:50, .Label = c("1",
"2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
"13", "14", "15", "16", "17", "18", "19", "20", "21", "22",
"23", "24", "25", "26", "27", "28", "29", "30", "31", "32",
"33", "34", "35", "36", "37", "38", "39", "40", "41", "42",
"43", "44", "45", "46", "47", "48", "49", "50"), class = "factor")), .Names = c("lat",
"long", "hrus"), row.names = c(NA, 50L), class = "data.frame")