can we group array of objects in multilevel. This is my array of objects with common date and places, but different timings.
[
{
"ID": 2104221,
"date": "2022-11-18T00:00:00",
"day": "18",
"weekDay": "Fri",
"month": "Nov",
"Placeid": 2293,
"Place": "AAAAAA",
"address": "25 SSSSSS",
"city": "RRRRR",
"state": "WWWW",
"Time": "8:00 PM"
},
{
"ID": 2104344,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"zipCode": "95126",
"Time": "03:00 PM"
},
{
"ID": 2104345,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"zipCode": "95126",
"Time": "06:00 PM"
},
{
"ID": 2104346,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"zipCode": "95126",
"Time": "09:00 PM"
},
{
"ID": 2104347,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 2464,
"Place": "ATheaters",
"address": "2901 Capital",
"city": "C",
"state": "TT",
"Time": "06:00 PM"
},
{
"ID": 2104348,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 2464,
"Place": "ATheaters",
"address": "2901 Capital",
"city": "ANNNN",
"state": "TT",
"Time": "10:00 PM"
},
{
"ID": 2103857,
"date": "2022-11-05T16:30:00",
"day": "5",
"weekDay": "Sat",
"month": "Nov",
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Time": " 4:30 PM"
},
{
"ID": 2103858,
"date": "2022-11-05T23:30:00",
"day": "5",
"weekDay": "Sat",
"month": "Nov",
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Time": "11:30 PM"
},
{
"ID": 2103862,
"date": "2022-11-15T23:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Time": "11:00 PM"
}
]
I would like to group based on day and places. my desired output will be
[
{
"day": "18",
"date": "2022-11-18T00:00:00",
"weekDay": "Fri",
"month": "Nov",
"Places": [
{
"Placeid": 2293,
"Place": "AAAAAA",
"address": "25 SSSSSS",
"city": "RRRRR",
"state": "WWWW",
"Timings": [
{
"ID": 2104221,
"Time": "8:00 PM"
}
]
}
]
},
{
"day": "15",
"date": "2022-11-15T23:00:00",
"weekDay": "Tue",
"month": "Nov",
"Places": [
{
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"Timings": [
{
"ID": 2104344,
"Time": "03:00 PM"
},
{
"ID": 2104345,
"Time": "06:00 PM"
},
{
"ID": 2104346,
"Time": "09:00 PM"
}
]
},
{
"Placeid": 2464,
"Place": "ATheaters",
"address": "2901 Capital",
"city": "ANNNN",
"state": "TT",
"Timings": [
{
"ID": 2104347,
"Time": "06:00 PM"
},
{
"ID": 2104348,
"Time": "10:00 PM"
}
]
},
{
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"Timings": [
{
"ID": 2103862,
"Time": "11:00 PM"
}
]
}
]
},
{
"day": "5",
"date": "2022-11-05T16:30:00",
"weekDay": "Sat",
"month": "Nov",
"Places": [
{
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Timings": [
{
"ID": 2103857,
"Time": " 4:30 PM"
},
{
"ID": 2103858,
"Time": "11:30 PM"
}
]
}
]
}
]
Is it possible to group like this using javascript? i tried with below code to group. but i didnt get my desired output.
const MultiLevelGrouping=(data,['day','Placeid'])=>{
var getEmpty = () => ({ _: [] }),
result = data
.reduce((q, o) => {
groups
.reduce((r, k) => {
const v = o[k];
if (!v) return r;
if (!r[v]) r._.push({ [k]: v, [k + 'Detail']: (r[v] = getEmpty())._ });
return r[v];
}, q)
._
.push(o);
return q;
}, getEmpty())
._;
return result;
}
Can Someone help me out ?
You could use 2 mapper objects. One to group each day and another to group each day-place combination. Then create entries in each mapper object if the key doesn't exists yet. Also, push the dayPlaceMap[comboKey] reference to the dayMap[day].Places array o that when the dayPlaceMap is updated, the nested array is updated.
const input = [{ID:2104221,date:"2022-11-18T00:00:00",day:"18",weekDay:"Fri",month:"Nov",Placeid:2293,Place:"AAAAAA",address:"25 SSSSSS",city:"RRRRR",state:"WWWW",Time:"8:00 PM"},{ID:2104344,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"03:00 PM"},{ID:2104345,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"06:00 PM"},{ID:2104346,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"09:00 PM"},{ID:2104347,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"C",state:"TT",Time:"06:00 PM"},{ID:2104348,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"ANNNN",state:"TT",Time:"10:00 PM"},{ID:2103857,date:"2022-11-05T16:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:" 4:30 PM"},{ID:2103858,date:"2022-11-05T23:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:30 PM"},{ID:2103862,date:"2022-11-15T23:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:00 PM"}],
dayMap = {},
dayPlaceMap = {};
for (const { day, date, weekDay, month, Placeid, ID, Time, ...rest } of input) {
dayMap[day] ??= { day, date, weekDay, month, Places: [] };
const comboKey = `${day}|${Placeid}`
if(!dayPlaceMap[comboKey]) {
dayPlaceMap[comboKey] ??= { Placeid, ...rest, Timings: [] }
dayMap[day].Places.push( dayPlaceMap[comboKey] )
}
dayPlaceMap[comboKey].Timings.push({ ID, Time })
}
console.log(Object.values(dayMap))
Here is a one-liner to do it:
const data = [{ID:2104221,date:"2022-11-18T00:00:00",day:"18",weekDay:"Fri",month:"Nov",Placeid:2293,Place:"AAAAAA",address:"25 SSSSSS",city:"RRRRR",state:"WWWW",Time:"8:00 PM"},{ID:2104344,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"03:00 PM"},{ID:2104345,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"06:00 PM"},{ID:2104346,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"09:00 PM"},{ID:2104347,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"C",state:"TT",Time:"06:00 PM"},{ID:2104348,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"ANNNN",state:"TT",Time:"10:00 PM"},{ID:2103857,date:"2022-11-05T16:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:" 4:30 PM"},{ID:2103858,date:"2022-11-05T23:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:30 PM"},{ID:2103862,date:"2022-11-15T23:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:00 PM"}]
let r = Object.values(data.reduce((a,
{day, date, weekDay, month})=>(a[`|${day}`]??={day, date, weekDay, month,
Places: Object.values(data.filter(i=>i.day===day).reduce((b, {
Placeid, Place, address, city, state})=>(b[`${day}|${Placeid}`]??={
Placeid, Place, address, city, state,
Timings: data.filter(j=>j.day===day && j.Placeid===Placeid)
.map(j=>({ID: j.ID, Time: j.Time}))}, b), {}))}, a), {}));
console.log(r);
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 4 years ago.
I'm using weather-js with this code :
weather.find({search: 'San Francisco, CA', degreeType: 'F'}, function(err, result) {
if(err) console.log(err);
console.log(JSON.stringify(result, null, 2));
});
But I don't know how I could extract the result value from this
The result should be like this:
[
{
"location": {
"name": "San Francisco, CA",
"lat": "37.777",
"long": "-122.42",
"timezone": "-7",
"alert": "",
"degreetype": "F",
"imagerelativeurl": "http://blob.weather.microsoft.com/static/weather4/en-us/"
},
"current": {
"temperature": "70",
"skycode": "32",
"skytext": "Sunny",
"date": "2017-03-14",
"observationtime": "13:15:00",
"observationpoint": "San Francisco, California",
"feelslike": "70",
"humidity": "59",
"winddisplay": "3 mph West",
"day": "Tuesday",
"shortday": "Tue",
"windspeed": "3 mph",
"imageUrl": "http://blob.weather.microsoft.com/static/weather4/en-us/law/32.gif"
},
"forecast": [
{
"low": "52",
"high": "69",
"skycodeday": "31",
"skytextday": "Clear",
"date": "2017-03-13",
"day": "Monday",
"shortday": "Mon",
"precip": ""
},
{
"low": "52",
"high": "70",
"skycodeday": "34",
"skytextday": "Mostly Sunny",
"date": "2017-03-14",
"day": "Tuesday",
"shortday": "Tue",
"precip": "10"
},
{
"low": "56",
"high": "63",
"skycodeday": "26",
"skytextday": "Cloudy",
"date": "2017-03-15",
"day": "Wednesday",
"shortday": "Wed",
"precip": "20"
},
{
"low": "50",
"high": "64",
"skycodeday": "28",
"skytextday": "Mostly Cloudy",
"date": "2017-03-16",
"day": "Thursday",
"shortday": "Thu",
"precip": "10"
},
{
"low": "53",
"high": "67",
"skycodeday": "32",
"skytextday": "Sunny",
"date": "2017-03-17",
"day": "Friday",
"shortday": "Fri",
"precip": "10"
}
]
}
]
In the result, there are many useful information:
latitude & longitude of the location
current temperature of the location
forecast information for next four days
All those information exist in the result JSON that you can parse and use it. Consider that the result is an JSON array with only one element in this case.
for example you can log current temperature like this:
console.log(result[0].current.temperature)
Declare a variable and write the result into this variable, if no error occured:
var res = null;
weather.find({search: 'San Francisco, CA', degreeType: 'F'}, function(err, result) {
if(err) {
console.log(err);
} else {
res = result;
}
console.log(JSON.stringify(result, null, 2));
});
I'm new to angular and trying to implement a dashboard application. The dashboard contains 50+ different charts so I decided to capture all the data of these charts user one API call, the json file is as follows
{
"site": "bje",
"date": "2018-03-09T00:00:00",
"charts": [
{
"code": "INDK-01",
"dataset": [
{
"name": "Actual",
"data": [
{
"label": "05 Jan 2018",
"value": 351,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 373,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 353,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 379,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 356,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 371,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 371,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 368,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 369,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 371,
"date": "2018-03-09T00:00:00"
}
]
},
{
"name": "Budget",
"data": [
{
"label": "05 Jan 2018",
"value": 0,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 0,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 0,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 0,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 0,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 0,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 0,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 0,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 0,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 331.02,
"date": "2018-03-09T00:00:00"
}
]
},
{
"name": "Target",
"data": [
{
"label": "05 Jan 2018",
"value": 0,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 0,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 0,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 0,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 0,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 0,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 0,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 0,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 0,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 331.02,
"date": "2018-03-09T00:00:00"
}
]
}
]
},..............etc
] }
The service .ts file contain a function that return the data as follows:
getDashboardData(): Observable<ProcessedData>{
return this._http.get<ProcessedData>(this.baseUrl)
.map(res => res);
}
As well I have created one re-usable component which accept an input of chart code (ex. "INDK-01" in above json sample) an in ngOnInit I have this code
ngOnInit() {
this._service.getDashboardData(this.selectedSite, this.selectedDate)
.subscribe(res => {
this.BudgetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Budget')
.data
.sort();
this.TargetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Target')
.data
.sort();
.
.
.
});
in dashboard home component I add multiple
the problem that it makes multiple calls to the API everytime I load dashboard page, is there any way to avoid that? like for example store the data in a global object and from each chart will filter to get the proper data.
You need to first shareReplay(1) your observable something like following to cache the data:
const sharedOb = this._service.getDashboardData(this.selectedSite, this.selectedDate).shareReplay(1)
sharedOb.subscribe(x=>{
// do your work here
})
Now you can subscribe to sharedOb as many as times you want, there will only be one server round-trip.
You could use ".share".
this._service.getDashboardData(this.selectedSite, this.selectedDate).subscribe(res =>
{
this.BudgetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Budget')
.data
.sort();
this.TargetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Target')
.data
.sort();
}).share();