Trying to group my array using 2 nested properties of object. Below is the data I'm working with.
I need to group this data using start and end properties which are nested in time object here
`
[{
"id": 227,
"day": 0,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 228,
"day": 1,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 229,
"day": 2,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 230,
"day": 3,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 231,
"day": 4,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 232,
"day": 5,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 233,
"day": 6,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 283,
"day": 0,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 284,
"day": 1,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 285,
"day": 2,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 286,
"day": 3,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 287,
"day": 4,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 288,
"day": 5,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 289,
"day": 6,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}]
`
Currently I can group using one property using code below but not both:
var result = _.groupBy(this.slots, 'time.start')
Expected data could look like below:
`
03: 00: 00 - 06: 00: 00: [{
"id": 227,
"day": 0,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
},
{
"id": 228,
"day": 1,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}
]
06: 00: 00 - 08: 00: 00: [{
"id": 283,
"day": 0,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
},
{
"id": 284,
"day": 1,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}
]
`
Thanks in advance :)
You can use the function reduce for grouping by those values.
let arr = [{ "id": 227, "day": 0, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 228, "day": 1, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 229, "day": 2, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 230, "day": 3, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 231, "day": 4, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 232, "day": 5, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 233, "day": 6, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 283, "day": 0, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 284, "day": 1, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 285, "day": 2, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 286, "day": 3, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 287, "day": 4, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 288, "day": 5, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 289, "day": 6, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}]
let result = arr.reduce((a, c) => {
let key = `${c.time.start} - ${c.time.end}`;
(a[key] || (a[key] = [])).push(c);
return a;
}, {});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Use _.groupBy() with a callback, and generate the key from start and end:
const data = [{"id":227,"day":0,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":228,"day":1,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":229,"day":2,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":230,"day":3,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":231,"day":4,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":232,"day":5,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":233,"day":6,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":283,"day":0,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":284,"day":1,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":285,"day":2,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":286,"day":3,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":287,"day":4,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":288,"day":5,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":289,"day":6,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3}]
const result = _.groupBy(data, ({ time: { start, end } }) => `${start} - ${end}`)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
Related
I have the following array of objects. How do I change the keys of the array (0,1) to the skipperid (217,1)
[0:
{
"type": "RES",
"date": "2022-05-14",
"doy": 133,
"skipperid": 217,
"boat": "Laura",
"start": "09:00:00",
"end": "22:00:00",
"spots": 5,
"fname": "David",
"lname": "Cross"
},
1:{
"type": "SAIL",
"date": "2022-05-14",
"doy": 133,
"skipperid": 1,
"boat": "Avrora",
"start": "10:00:00",
"end": "13:00:00",
"spots": 3,
"fname": "Bob",
"lname": "Smith"
}
]
Javascript arrays always have numeric indexes. If you want to have keys, you'll need to convert into an object as shown here.
let data = [{
"type": "RES",
"date": "2022-05-14",
"doy": 133,
"skipperid": 217,
"boat": "Laura",
"start": "09:00:00",
"end": "22:00:00",
"spots": 5,
"fname": "David",
"lname": "Cross"
},
{
"type": "SAIL",
"date": "2022-05-14",
"doy": 133,
"skipperid": 1,
"boat": "Avrora",
"start": "10:00:00",
"end": "13:00:00",
"spots": 3,
"fname": "Bob",
"lname": "Smith"
}
]
data = data.reduce((b,a) => ({...b, [a.skipperid]:a}), {});
console.log(data['217'])
I definitely suggest using an object like #Kinglish example.
Moving the position from current index to index by skipperid creates an array of size (highest skipperid), leaving all index != skipperid as undefined
USE AN OBJECT
This is messy:
let data = [{
"type": "RES",
"date": "2022-05-14",
"doy": 133,
"skipperid": 217,
"boat": "Laura",
"start": "09:00:00",
"end": "22:00:00",
"spots": 5,
"fname": "David",
"lname": "Cross"
},
{
"type": "SAIL",
"date": "2022-05-14",
"doy": 133,
"skipperid": 1,
"boat": "Avrora",
"start": "10:00:00",
"end": "13:00:00",
"spots": 3,
"fname": "Bob",
"lname": "Smith"
}
]
data.forEach((o,i,self)=> {
if(o?.skipperid != i){
self[o.skipperid] = o;
self[i] = undefined
}
})
console.log(data)
Observations :
JSON you provided is not a valid JSON.
result will be an object instead of an array.
Working Demo :
const arr = [{
"type": "RES",
"date": "2022-05-14",
"doy": 133,
"skipperid": 217,
"boat": "Laura",
"start": "09:00:00",
"end": "22:00:00",
"spots": 5,
"fname": "David",
"lname": "Cross"
},
{
"type": "SAIL",
"date": "2022-05-14",
"doy": 133,
"skipperid": 1,
"boat": "Avrora",
"start": "10:00:00",
"end": "13:00:00",
"spots": 3,
"fname": "Bob",
"lname": "Smith"
}
];
const obj = {};
arr.forEach((item) => {
obj[item.skipperid] = item
});
console.log(obj)
I have a barchart displaying groups of bars for each month in a 3 month period.
I have now been asked to add a line chart with the daily views spanning the 3 month period to chart like this (the red line i've drawn in the below image is the linechart of views):
I have tried several strategies, and all of them were unsuccessful. I'm currently at a loss to how i should approach this, and any ideas are appreciated. if worse comes to worse, i can always render two seperate charts and absolutely position one above the other, but i thought i'd try here for suggestions before resorting to that. I am not above changing my data structure, so long as i can keep the bar's grouped by month, and plot the line linearly over the 3 month period
The data structure i am currently using is something like below:
[
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 3,
"value": 35
},
"views": {
"name": "views",
"growth": 13,
"value": 61
},
"shares": {
"name": "shares",
"growth": 17,
"value": 193
},
"favorites": {
"name": "favorites",
"growth": 12,
"value": 164
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 22,
"value": 203
},
"views": {
"name": "views",
"growth": 6,
"value": 31
},
"shares": {
"name": "shares",
"growth": 21,
"value": 231
},
"favorites": {
"name": "favorites",
"growth": 19,
"value": 30
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 16,
"value": 196
},
"views": {
"name": "views",
"growth": 16,
"value": 107
},
"shares": {
"name": "shares",
"growth": 13,
"value": 59
},
"favorites": {
"name": "favorites",
"growth": 2,
"value": 175
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 20,
"value": 25
},
"views": {
"name": "views",
"growth": 21,
"value": 104
},
"shares": {
"name": "shares",
"growth": 14,
"value": 124
},
"favorites": {
"name": "favorites",
"growth": 1,
"value": 164
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 10,
"value": 168
},
"views": {
"name": "views",
"growth": 16,
"value": 128
},
"shares": {
"name": "shares",
"growth": 14,
"value": 79
},
"favorites": {
"name": "favorites",
"growth": 8,
"value": 187
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 21,
"value": 136
},
"views": {
"name": "views",
"growth": 9,
"value": 241
},
"shares": {
"name": "shares",
"growth": 20,
"value": 29
},
"favorites": {
"name": "favorites",
"growth": 0,
"value": 56
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 7,
"value": 212
},
"views": {
"name": "views",
"growth": 19,
"value": 90
},
"shares": {
"name": "shares",
"growth": 6,
"value": 175
},
"favorites": {
"name": "favorites",
"growth": 6,
"value": 66
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 8,
"value": 179
},
"views": {
"name": "views",
"growth": 12,
"value": 81
},
"shares": {
"name": "shares",
"growth": 9,
"value": 200
},
"favorites": {
"name": "favorites",
"growth": 2,
"value": 236
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 10,
"value": 200
},
"views": {
"name": "views",
"growth": 4,
"value": 105
},
"shares": {
"name": "shares",
"growth": 17,
"value": 188
},
"favorites": {
"name": "favorites",
"growth": 8,
"value": 77
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 17,
"value": 148
},
"views": {
"name": "views",
"growth": 16,
"value": 152
},
"shares": {
"name": "shares",
"growth": 24,
"value": 79
},
"favorites": {
"name": "favorites",
"growth": 12,
"value": 129
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 17,
"value": 202
},
"views": {
"name": "views",
"growth": 3,
"value": 132
},
"shares": {
"name": "shares",
"growth": 15,
"value": 186
},
"favorites": {
"name": "favorites",
"growth": 15,
"value": 105
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 11,
"value": 83
},
"views": {
"name": "views",
"growth": 19,
"value": 192
},
"shares": {
"name": "shares",
"growth": 6,
"value": 114
},
"favorites": {
"name": "favorites",
"growth": 2,
"value": 109
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 9,
"value": 104
},
"views": {
"name": "views",
"growth": 24,
"value": 54
},
"shares": {
"name": "shares",
"growth": 17,
"value": 60
},
"favorites": {
"name": "favorites",
"growth": 1,
"value": 108
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 6,
"value": 80
},
"views": {
"name": "views",
"growth": 22,
"value": 214
},
"shares": {
"name": "shares",
"growth": 23,
"value": 38
},
"favorites": {
"name": "favorites",
"growth": 15,
"value": 156
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 21,
"value": 247
},
"views": {
"name": "views",
"growth": 16,
"value": 72
},
"shares": {
"name": "shares",
"growth": 17,
"value": 158
},
"favorites": {
"name": "favorites",
"growth": 12,
"value": 74
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 2,
"value": 193
},
"views": {
"name": "views",
"growth": 6,
"value": 250
},
"shares": {
"name": "shares",
"growth": 18,
"value": 167
},
"favorites": {
"name": "favorites",
"growth": 20,
"value": 98
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 25,
"value": 84
},
"views": {
"name": "views",
"growth": 21,
"value": 212
},
"shares": {
"name": "shares",
"growth": 0,
"value": 172
},
"favorites": {
"name": "favorites",
"growth": 14,
"value": 246
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 14,
"value": 90
},
"views": {
"name": "views",
"growth": 6,
"value": 47
},
"shares": {
"name": "shares",
"growth": 7,
"value": 234
},
"favorites": {
"name": "favorites",
"growth": 14,
"value": 181
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 10,
"value": 140
},
"views": {
"name": "views",
"growth": 1,
"value": 112
},
"shares": {
"name": "shares",
"growth": 20,
"value": 191
},
"favorites": {
"name": "favorites",
"growth": 12,
"value": 58
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 2,
"value": 250
},
"views": {
"name": "views",
"growth": 14,
"value": 109
},
"shares": {
"name": "shares",
"growth": 16,
"value": 159
},
"favorites": {
"name": "favorites",
"growth": 12,
"value": 89
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 24,
"value": 46
},
"views": {
"name": "views",
"growth": 6,
"value": 189
},
"shares": {
"name": "shares",
"growth": 11,
"value": 197
},
"favorites": {
"name": "favorites",
"growth": 19,
"value": 179
}
}
],
[
{
"month": "May",
"messages": {
"name": "messages",
"growth": 19,
"value": 52
},
"views": {
"name": "views",
"growth": 11,
"value": 86
},
"shares": {
"name": "shares",
"growth": 2,
"value": 63
},
"favorites": {
"name": "favorites",
"growth": 17,
"value": 133
}
},
{
"month": "June",
"messages": {
"name": "messages",
"growth": 9,
"value": 225
},
"views": {
"name": "views",
"growth": 1,
"value": 68
},
"shares": {
"name": "shares",
"growth": 23,
"value": 220
},
"favorites": {
"name": "favorites",
"growth": 7,
"value": 124
}
},
{
"month": "July",
"messages": {
"name": "messages",
"growth": 9,
"value": 171
},
"views": {
"name": "views",
"growth": 1,
"value": 221
},
"shares": {
"name": "shares",
"growth": 22,
"value": 191
},
"favorites": {
"name": "favorites",
"growth": 4,
"value": 95
}
}
]
]
And the code for rendering my chart is:
import React from 'react';
import {
BarChart, Bar, XAxis, YAxis,
Tooltip, LabelList, Legend, ResponsiveContainer
} from 'recharts';
const labels = {
messages:'Messages',
views:'Views',
shares:'Shares',
favorites:'Favorites'
};
const legendFormatter = (value,entry,index) => labels[value.split('.')[0]];
const tooltipFormatter = (value,name,props) => [value,legendFormatter(name)]
const renderCustomizedLabel = (fill) =>{
return (props) => {
const { x, y, width, value } = props;
console.log(props)
return (
<g>
<rect width={width} height={30} x={x} y={y-30} fill="#fff" />
<text x={x + width / 2} y={y - 12} fill={fill} textAnchor="middle" dominantBaseline="middle">
{value > 0 ?('+'+value):value}
</text>
</g>
);
};
};
const RenderChart = ({data})=>(<ResponsiveContainer height={400}>
<BarChart data={data}
style={{ backgroundColor:'#F4F4F4' }}
margin={{ top: 45, right: 20, left: -10, bottom: 15 }}
>
<XAxis dataKey="month" />
<YAxis/>
<Tooltip formatter={tooltipFormatter} />
<Legend formatter={legendFormatter} />
<Bar dataKey="messages.value" fill="#4A8A95" minPointSize={5}>
<LabelList dataKey="messages.growth" content={renderCustomizedLabel('#4A8A95')} />
</Bar>
<Bar dataKey="views.value" fill="#FBBE52" minPointSize={5}>
<LabelList dataKey="views.growth" content={renderCustomizedLabel('#FBBE52')} />
</Bar>
<Bar dataKey="shares.value" fill="#EA4646" minPointSize={5}>
<LabelList dataKey="shares.growth" content={renderCustomizedLabel('#EA4646')} />
</Bar>
<Bar dataKey="favorites.value" fill="#0467BA" minPointSize={5}>
<LabelList dataKey="favorites.growth" content={renderCustomizedLabel('#0467BA')} />
</Bar>
</BarChart>
</ResponsiveContainer>);
I have a script for full calendar listed below. Every thing is working fine. I returned events stored in database from controller in JSON format. Now that the format of json data is changed slightly, i could not parse to show events in calendar. Following is my script;
$('#calendar').fullCalendar({
editable: true,
events: {
url: "{{ route('event_calendar.data') }}"
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
var data = event.title;
var start = event.start.format();
var end = event.end.format();
var csrf= "{{csrf_token()}}"
$.post("{{ route('event_update') }}",{title: data, start: start, end: end, _token: csrf}, function (info) { $("#result").html(info); });
},
header: {
center: 'month,thisWeek' // buttons for switching between views
},
views: {
thisWeek: {
type: 'agenda',
duration: { week: 1 },
buttonText: 'This week'
}
}
});
This is my previous data in JSON format which is acquired from url i.e {{ route('event_calendar.data') }}
[{
"id": 9,
"title": "Event 1",
"color": "#af2e0e",
"start": "2017-09-18",
"end": "2017-09-20"
}, {
"id": 10,
"title": "Event 2",
"color": "#0b7c0d",
"start": "2017-09-04",
"end": "0000-00-00"
}, {
"id": 11,
"title": "Event 3",
"color": "#378006",
"start": "2017-09-10",
"end": "2017-09-12"
}, {
"id": 13,
"title": "Publication",
"color": "#378006",
"start": "2017-09-15",
"end": "2017-09-16"
}, {
"id": 14,
"title": "other",
"color": "#378006",
"start": "2017-09-05",
"end": "2017-09-06"
}, {
"id": 18,
"title": "other",
"color": "#378006",
"start": "2017-09-18",
"end": "2017-09-19"
}, {
"id": 19,
"title": "Apple",
"color": "#378006",
"start": "2017-09-08",
"end": "2017-09-09"
}, {
"id": 20,
"title": "Developer",
"color": "#378006",
"start": "0000-00-00",
"end": "0000-00-00"
}, {
"id": 21,
"title": "New event",
"color": "#af2e0e",
"start": "2017-09-28",
"end": "2017-09-30"
}, {
"id": 22,
"title": "asdasd",
"color": "#0b7c0d",
"start": "2017-08-28",
"end": "2017-08-31"
}]
This is my new JSON data acquired from same url. Now as you can see there is a 'data' added at top events didn't show in the calendar. How to parse this form to show events in calendar?
{
"data": [{
"id": 9,
"title": "Event 1",
"color": "#af2e0e",
"start": "2017-09-18",
"end": "2017-09-20"
}, {
"id": 10,
"title": "Event 2",
"color": "#0b7c0d",
"start": "2017-09-04",
"end": "0000-00-00"
}, {
"id": 11,
"title": "Event 3",
"color": "#378006",
"start": "2017-09-10",
"end": "2017-09-12"
}, {
"id": 13,
"title": "Publication",
"color": "#378006",
"start": "2017-09-15",
"end": "2017-09-16"
}, {
"id": 14,
"title": "other",
"color": "#378006",
"start": "2017-09-05",
"end": "2017-09-06"
}, {
"id": 18,
"title": "other",
"color": "#378006",
"start": "2017-09-18",
"end": "2017-09-19"
}, {
"id": 19,
"title": "Apple",
"color": "#378006",
"start": "2017-09-08",
"end": "2017-09-09"
}, {
"id": 20,
"title": "Developer",
"color": "#378006",
"start": "0000-00-00",
"end": "0000-00-00"
}, {
"id": 21,
"title": "New event",
"color": "#af2e0e",
"start": "2017-09-28",
"end": "2017-09-30"
}, {
"id": 22,
"title": "asdasd",
"color": "#0b7c0d",
"start": "2017-08-28",
"end": "2017-08-31"
}]
}
It is probably a better option to have your source return properly formatted data, but if for some reason you can't do that, you can do it in Javascript.
The Fullcalendar docs describe that you can pass normal $.ajax options in your events source. So you can specify a success callback which returns the data in the format you need.
I tried this with your data locally and it works:
$('#calendar').fullCalendar({
// ... your code
events: {
url: "{{ route('event_calendar.data') }}",
success: function(response) {
// Instead of returning the raw response, return only the data
// element Fullcalendar wants
return response.data;
}
},
// ... rest of your Fullcalendar code
I'm using AngularJS and the jquery chosen plugin to populate a multiple select form. My Angular code has a service that is calling a node.js web service. The option list for the chosen select box is being populated from a json file while the value is being stored within model from the nodejs service. I've been using this link to guide me but now seem to be stuck.
I've included the code here.
My chosen options are being populated as such:
[
{"id": 1, "name": "00:00", "value": 0},
{"id": 2, "name": "00:15", "value": 900000},
{"id": 3, "name": "00:30", "value": 1800000}
...
]
But my model is being stored as:
meal.dinnerTimes = ["06:15","18:30"]
So when the model is loaded by the service and controller. The select box is always blank where I would expect to see
"06:15" and "18:30" already populated in this case
Any help would be appreciated
As you only have value with you while assigning model, use select as label for value in array syntax to have only value property assigned to the model.
Also note that you are not invoking callback function provided in MealSvc factory hence, value of model will never get set!
Plunker Demo
var app = angular.module("MealApp", ['MealService']);
var data = [{
"id": 1,
"name": "00:00",
"value": 0
}, {
"id": 2,
"name": "00:15",
"value": 900000
}, {
"id": 3,
"name": "00:30",
"value": 1800000
}, {
"id": 4,
"name": "00:45",
"value": 2700000
}, {
"id": 5,
"name": "01:00",
"value": 3600000
}, {
"id": 6,
"name": "01:15",
"value": 4500000
}, {
"id": 7,
"name": "01:30",
"value": 5400000
}, {
"id": 8,
"name": "01:45",
"value": 6300000
}, {
"id": 9,
"name": "02:00",
"value": 7200000
}, {
"id": 10,
"name": "02:15",
"value": 8100000
}, {
"id": 11,
"name": "02:30",
"value": 9000000
}, {
"id": 12,
"name": "02:45",
"value": 9900000
}, {
"id": 13,
"name": "03:00",
"value": 10800000
}, {
"id": 14,
"name": "03:15",
"value": 11700000
}, {
"id": 15,
"name": "03:30",
"value": 12600000
}, {
"id": 16,
"name": "03:45",
"value": 13500000
}, {
"id": 17,
"name": "04:00",
"value": 14400000
}, {
"id": 18,
"name": "04:15",
"value": 15300000
}, {
"id": 19,
"name": "04:30",
"value": 16200000
}, {
"id": 20,
"name": "04:45",
"value": 17100000
}, {
"id": 21,
"name": "05:00",
"value": 18000000
}, {
"id": 22,
"name": "05:15",
"value": 18900000
}, {
"id": 23,
"name": "05:30",
"value": 19800000
}, {
"id": 24,
"name": "05:45",
"value": 20700000
}, {
"id": 25,
"name": "06:00",
"value": 21600000
}, {
"id": 26,
"name": "06:15",
"value": 22500000
}, {
"id": 27,
"name": "06:30",
"value": 23400000
}, {
"id": 28,
"name": "06:45",
"value": 24300000
}, {
"id": 29,
"name": "07:00",
"value": 25200000
}, {
"id": 30,
"name": "07:15",
"value": 26100000
}, {
"id": 31,
"name": "07:30",
"value": 27000000
}, {
"id": 32,
"name": "07:45",
"value": 27900000
}, {
"id": 33,
"name": "08:00",
"value": 28800000
}, {
"id": 34,
"name": "08:15",
"value": 29700000
}, {
"id": 35,
"name": "08:30",
"value": 30600000
}, {
"id": 36,
"name": "08:45",
"value": 31500000
}, {
"id": 37,
"name": "09:00",
"value": 32400000
}, {
"id": 38,
"name": "09:15",
"value": 33300000
}, {
"id": 39,
"name": "09:30",
"value": 34200000
}, {
"id": 40,
"name": "09:45",
"value": 35100000
}, {
"id": 41,
"name": "10:00",
"value": 36000000
}, {
"id": 42,
"name": "10:15",
"value": 36900000
}, {
"id": 43,
"name": "10:30",
"value": 37800000
}, {
"id": 44,
"name": "10:45",
"value": 38700000
}, {
"id": 45,
"name": "11:00",
"value": 39600000
}, {
"id": 46,
"name": "11:15",
"value": 40500000
}, {
"id": 47,
"name": "11:30",
"value": 41400000
}, {
"id": 48,
"name": "11:45",
"value": 42300000
}, {
"id": 49,
"name": "12:00",
"value": 43200000
}, {
"id": 50,
"name": "12:15",
"value": 44100000
}, {
"id": 51,
"name": "12:30",
"value": 45000000
}, {
"id": 52,
"name": "12:45",
"value": 45900000
}, {
"id": 53,
"name": "13:00",
"value": 46800000
}, {
"id": 54,
"name": "13:15",
"value": 47700000
}, {
"id": 55,
"name": "13:30",
"value": 48600000
}, {
"id": 56,
"name": "13:45",
"value": 49500000
}, {
"id": 57,
"name": "14:00",
"value": 50400000
}, {
"id": 58,
"name": "14:15",
"value": 51300000
}, {
"id": 59,
"name": "14:30",
"value": 52200000
}, {
"id": 60,
"name": "14:45",
"value": 53100000
}, {
"id": 61,
"name": "15:00",
"value": 54000000
}, {
"id": 62,
"name": "15:15",
"value": 54900000
}, {
"id": 63,
"name": "15:30",
"value": 55800000
}, {
"id": 64,
"name": "15:45",
"value": 56700000
}, {
"id": 65,
"name": "16:00",
"value": 57600000
}, {
"id": 66,
"name": "16:15",
"value": 58500000
}, {
"id": 67,
"name": "16:30",
"value": 59400000
}, {
"id": 68,
"name": "16:45",
"value": 60300000
}, {
"id": 69,
"name": "17:00",
"value": 61200000
}, {
"id": 70,
"name": "17:15",
"value": 62100000
}, {
"id": 71,
"name": "17:30",
"value": 63000000
}, {
"id": 72,
"name": "17:45",
"value": 63900000
}, {
"id": 73,
"name": "18:00",
"value": 64800000
}, {
"id": 74,
"name": "18:15",
"value": 65700000
}, {
"id": 75,
"name": "18:30",
"value": 66600000
}, {
"id": 76,
"name": "18:45",
"value": 67500000
}, {
"id": 77,
"name": "19:00",
"value": 68400000
}, {
"id": 78,
"name": "19:15",
"value": 69300000
}, {
"id": 79,
"name": "19:30",
"value": 70200000
}, {
"id": 80,
"name": "19:45",
"value": 71100000
}, {
"id": 81,
"name": "20:00",
"value": 72000000
}, {
"id": 82,
"name": "20:15",
"value": 72900000
}, {
"id": 83,
"name": "20:30",
"value": 73800000
}, {
"id": 84,
"name": "20:45",
"value": 74700000
}, {
"id": 85,
"name": "21:00",
"value": 75600000
}, {
"id": 86,
"name": "21:15",
"value": 76500000
}, {
"id": 87,
"name": "21:30",
"value": 77400000
}, {
"id": 88,
"name": "21:45",
"value": 78300000
}, {
"id": 89,
"name": "22:00",
"value": 79200000
}, {
"id": 90,
"name": "22:15",
"value": 80100000
}, {
"id": 91,
"name": "22:30",
"value": 81000000
}, {
"id": 92,
"name": "22:45",
"value": 81900000
}, {
"id": 93,
"name": "23:00",
"value": 82800000
}, {
"id": 94,
"name": "23:15",
"value": 83700000
}, {
"id": 95,
"name": "23:30",
"value": 84600000
}, {
"id": 96,
"name": "23:45",
"value": 85500000
}];
app.directive('chosen', function() {
var linker = function(scope, element, attr) {
scope.$watch('availableTimes', function() {
element.triggerHandler('chosen:updated');
});
scope.$watch('MealSvc.get()', function() {
element.triggerHandler('chosen:updated');
});
element.chosen({
width: "95%"
});
};
return {
restrict: 'A',
link: linker
}
});
app.controller("MealCtrl", function MealCtrl($scope, $window, $http, MealSvc) {
$scope.times = [];
$scope.availableTimes = [];
$scope.fetchTimes = function() {
$scope.availableTimes = data;
}
$scope.fetchTimes();
MealSvc.get(function(res) {
$scope.times = res.dinnerTimes;
});
});
angular.module('MealService', []).factory('MealSvc', function($http) {
return {
get: function(response) {
response({
"name": "Second Tea",
"dinnerTimes": [46800000, 57600000]
})
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery#*"></script>
<link data-require="chosen#*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="MealApp" ng-controller="MealCtrl">
<div class="row">
<select data-placeholder="Select Dinner Time" multiple class="chzn-select" chosen ng-model="times" ng-options="times.value as times.name for times in availableTimes"></select>
</div>
</div>
</body>
</html>
I am using angular 1.5.5
function GetDashboardForAllEmployees()
{
var response = eRotaService.GetDashboard();
response.then(function (data) {
$scope.weekDays = data.data;
console.log(data.data);
}, function () {
alert("Failed to load dashboard.");
})
}
.NET service returns json :
{
"weekDays": [{
"name": "Monday",
"display": 0,
"employees": [{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}, {
"name": "Tuesday",
"display": 1,
"employees": [{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}]
}
I am planning to display each day of the week, but only first day will show(Monday).
<div class="row" ng-repeat="week in weekDays">
#for (int i = -2; i < 22; i+=2 )
{
<div class="col-sm-1">
#string.Format("{0}:00", i + 2)
</div>
}
<hr />
<div class="col-sm-12">
<h3>{{week[$index].name}}</h3>
<hr />
<div class="row" ng-repeat="employee in week[$index].employees">
<div class="col-sm-12">
<h4>{{employee.name}}</h4>
<hr />
<div gridster>
<ul>
<li gridster-item="employee.gridSetup" ng-cloak>
<div class="panel-default" >
<div class="panel-heading">
<h5>From : {{employee.start}} to {{employee.finish}}</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I tried to use ng-repeat without $index but result was blank page (no angular js error).
<div class="row" ng-repeat="week in weekDays">
hm mustn't it be
<div class="row" ng-repeat="week in weekDays.weekDays">
The Jason-String looks somewat formated like this:
{
"weekDays": [
{
"name": "Monday",
"display": 0,
"employees": [
{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
},
{
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}
]
},
{
"name": "Tuesday",
"display": 1,
"employees": [
{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
},
{
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}
]
}
]
}
so this means that all weekdays are in the element "weekDays". And then you have in week only one week and don't need an array-indexer to access the hole thing.