How json array pages by id dart - flutter

how all pages to map title print?
how json select example id=12 to map print title
{
"result": {
"name": "json1",
"pages": [
{
"zones": [
{
"title": "title1"
},
{
"title": "title2"
}
],
"id": 4
},
{
"zones": [
{
"title": "title3"
},
{
"title": "title4"
}
],
"id": 12
}
],
"creatorUserName": "admin",
"id": 2
}
}
List post = json;
children: post
.map( (post) => Container(
child: Center(child: Text(post.title]),)
))
.toList(),

I make a code to parse your json
var data = json.decode(jsonData);
var pagesArray = data["result"]["pages"];
pagesArray.forEach((page) {
var zones = page["zones"];
//Each id have your titles
int id = page["id"];
List<String> titles = new List();
zones.forEach((zone) {
titles.add(zone["title"]);
});
print("Id $id have this titles : ${titles.toString()}");
});

Related

How do I link or give ID's to each list tile. Flutter/Dart

I am already accessing one class from my model class, now I intend on accessing a different one from the same model class.
context : I am already accessing "field_value" under "Field" which is under "ListNode" and now I want to access the "run_hyperlink" which is right under the "ListNode" so that I can associate my list tiles with its "run_hyperlink" accordingly.
right now the code to extract the "run_hyperlink" is returning null for some reason :
This is the full code:
() async {
var newMessage = await (ReadCache.getString(key: 'cache1'));
var response = await http.get(
Uri.parse(
'http://192.168.1.4:8080/HongLeong/MENU_REQUEST.do?_dc=1658076505340&reset_context=1&table_id=25510&id_MenuAction=3&path=%3Cp%20class%3D%22x-window-header-path%22%3ELoss%20Event%3C%2Fp%3E&ViewType=MENU_REQUEST&gui_open_popup=1&id_Window=17&activeWindowId=mw_17&noOrigUserDate=true&LocalDate=20220718&LocalTime=00482500&TimeZone=Asia%2FShanghai&UserDate=0&UserTime=0&server_name=OPRISK_DATACOLLECTOR&key_id_list=&cell_context_id=0&id_Desktop=100252&operation_key=1000184&operation_sub_num=-1&is_json=1&is_popup=0&is_search_window=0&ccsfw_conf_by_user=0&is_batch=0&previousToken=1658069547560&historyToken=1658076505339&historyUrl=1'),
headers: {HttpHeaders.cookieHeader: newMessage},
);
LossEventResponseModel lossEventResponseModel =
LossEventResponseModel.fromJson(jsonDecode(response.body));
final listNode = lossEventResponseModel.response.genericListAnswer.listNode;
List<Map<String, dynamic>> incidentList = [
for (final json in listNode.map((x) => x.toJson()))
{
'Code': json['field'][0]['field_value'],
'Description': json['field'][1]['field_value'],
'Organisation Unit': json['field'][46]['field_value'],
'Date Reported': json['field'][18]['field_value'],
'Status': json['field'][4]['field_value'],
}
];
final List<String> values = [];
for(final item in incidentList){
values.add(item.values.map((e) => e.toString()).join("\n"));
}
await WriteCache.setListString(key: 'cache4', value: values);
RunHyperlink runHyperLink =
RunHyperlink.fromJson(jsonDecode(response.body));
final madKey = runHyperLink.madKey;
print(madKey);
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => LossEvent()));
}
This is what I am displaying right now :
how do I extract the "run_hyperlink" and link it to its corresponding List Tile.
this is one entry, the fields are displayed as shown and the "run_hyperlink" will preferable become the tiles ID in a sense :
this is the full HTTP response btw :
{
"RESPONSE":{
"GenericListAnswer":{
"empty_top_toolbar":"0",
"no_move_columns":"0",
"no_add_rem_columns":"0",
"no_sort_columns":"0",
"no_resize_columns":"0",
"no_oper_columns":"0",
"refresh_data":{
"ApplEra":"",
"delay":"0"
},
"no_gui_link":"0",
"index_last":"10742",
"max_num_rows":"0",
"index_true_last":"10742",
"is_history":"0",
"index_first_visible":"1",
"display_table_name":"Loss Event",
"table_id":"25510",
"table_name":"LossEvent",
"global_operation":[],
"num_visible":"200",
"list_type":"0",
"list_key":"1",
"parent_Class_id":"0",
"parent_common_id":"0",
"parent_applcol_id":"0",
"search_num":"0",
"id_box_search_num":"0",
"mad_key_list":"",
"choose_xsl":"0",
"is_search_popup":"0",
"section_list_params":"",
"saved_query":{
"query":[
{
"id":"184",
"name":"Loss Event",
"note":"",
"is_batch":"0",
"is_validated":"1",
"show_out_combo":"0",
"sort_key":"0",
"custom_gif":"",
"description":"Loss Event",
"may_have_checkbox":"0",
"is_active":"0",
"qtype":"2",
"may_be_edited":"1",
"pinnability":"2"
},
{
"id":"187",
"name":"Loss Event Days Open Tracking Report",
"note":"",
"is_batch":"0",
"is_validated":"1",
"show_out_combo":"0",
"sort_key":"0",
"custom_gif":"",
"description":"Loss Event Days Open Tracking Report",
"may_have_checkbox":"0",
"is_active":"0",
"qtype":"2",
"may_be_edited":"1",
"pinnability":"2"
},
{
"id":"185",
"name":"Loss Event 1",
"note":"",
"is_batch":"0",
"is_validated":"1",
"show_out_combo":"0",
"sort_key":"0",
"custom_gif":"",
"description":"Loss Event 1",
"may_have_checkbox":"0",
"is_active":"0",
"qtype":"2",
"may_be_edited":"1",
"pinnability":"2"
},
{
"id":"279",
"name":"T Loss Event Status summary",
"note":"",
"is_batch":"0",
"is_validated":"1",
"show_out_combo":"0",
"sort_key":"0",
"custom_gif":"",
"description":"T Loss Event Status summary",
"may_have_checkbox":"0",
"is_active":"0",
"qtype":"2",
"may_be_edited":"1",
"pinnability":"2"
}
]
},
"QuickSearch":{
"quick_search_column":[
"Title",
"Tajuk",
"Code"
]
},
"report_jasper_list":{
"report_jasper":[
{
"display_name":"LE002 - Loss Event Status Summary",
"id":"15",
"mad_key":"15",
"is_param":"1",
"report_options":"",
"reportForbiddenFormat":[
"2",
"4",
"5",
"6"
]
},
{
"display_name":"LE003 - Loss Event Days Open Tracking Report",
"id":"5",
"mad_key":"5",
"is_param":"1",
"report_options":"",
"reportForbiddenFormat":[
"2",
"4",
"5",
"6"
]
},
{
"display_name":"LE01 - Loss Event Data",
"id":"2",
"mad_key":"2",
"is_param":"1",
"report_options":"",
"reportForbiddenFormat":[
"2",
"4",
"5",
"6"
]
}
]
},
"wf_configured":"1",
"op_parameter":"",
"ListNode":[
{
"id":"2",
"mad_key":"32835",
"is_custom":"0",
"is_locked":"0",
"is_inactive":"1",
"run_hyperlink":{
"classid":"25510",
"id":"2",
"mad_key":"32835"
},
"field":[
{
"field_name":"code",
"col_index":"1",
"field_value":"LE-0000000002",
"mad_key":"0",
"id":"0"
},
{
"field_name":"common_desc_0",
"col_index":"2",
"field_value":"test_01",
"mad_key":"0",
"id":"0"
},
{
"field_name":"id_Org",
"col_index":"3",
"field_value":"01_01_04_01_SA - Shah Alam",
"mad_key":"100377",
"id":"100055"
},
{
"field_name":"dateReported",
"col_index":"4",
"field_value":"18/09/2020",
"mad_key":"0",
"id":"0"
}
]
},
{
"id":"3",
"mad_key":"32836",
"is_custom":"0",
"is_locked":"0",
"is_inactive":"0",
"run_hyperlink":{
"classid":"25510",
"id":"3",
"mad_key":"32836"
},
"field":[
{
"field_name":"code",
"col_index":"1",
"field_value":"LE-0000000003",
"mad_key":"0",
"id":"0"
},
{
"field_name":"common_desc_0",
"col_index":"2",
"field_value":"Transactions not reported (intentional)",
"mad_key":"0",
"id":"0"
},
{
"field_name":"id_Org",
"col_index":"3",
"field_value":"01_01_04_01_HQ - Menara Hong Leong, Damansara City",
"mad_key":"100451",
"id":"100069"
},
{
"field_name":"dateReported",
"col_index":"4",
"field_value":"03/02/2018",
"mad_key":"0",
"id":"0"
}
]
},
{
"id":"22",
"mad_key":"20234",
"is_custom":"0",
"is_locked":"0",
"is_inactive":"0",
"run_hyperlink":{
"classid":"25510",
"id":"22",
"mad_key":"20234"
},
"field":[
{
"field_name":"code",
"col_index":"1",
"field_value":"LE-0000000022",
"mad_key":"0",
"id":"0"
},
{
"field_name":"common_desc_0",
"col_index":"2",
"field_value":"Transaction type unauthorised",
"mad_key":"0",
"id":"0"
},
{
"field_name":"id_Org",
"col_index":"3",
"field_value":"01_01_04_01_HQ - Menara Hong Leong, Damansara City",
"mad_key":"100451",
"id":"100069"
},
{
"field_name":"dateReported",
"col_index":"4",
"field_value":"04/02/2018",
"mad_key":"0",
"id":"0"
}
]
},
"BASEL_RESPONSE":{
"UserDate":"0",
"UserTime":"0",
"CurrentTimeStamp":"26/07/2022 21:24:57 +0800",
"UserName":"Administrator",
"module_config_1":"0",
"module_config_2":"0",
"ErrEntity":{
"MessageID":"0",
"last_req_id":"50033",
"table_id":"25510",
"key_id_list":"536901,536902,536905,536909,536910,536913",
"operation_id":"0"
},
"is_csv":"0",
"VersionName":"DYMA # 6.1.24.0, ORG # 2017.3.22.15.0.41, GRC # 2017.3.22.15.0.55, LDC # 2017.3.22.15.1.8, DYMA_XML # 2017.3.22.15.0.30, NAS # 2017.3.22.15.1.22 - Config: 0 - Node: OPRISK_DATACOLLECTOR",
"ExpiryDate":"31/01/2030",
"count_key":"2",
"id_Us":"1",
"is_popup":"0",
"tot_messages":"0",
"my_messages":"0",
"product":"0"
},
"RESPONSE_HEADER":{
"SessionID":"qNQzbCTdM1821510940CzbeWQ0001",
"NomeRichiesta":"MENU_REQUEST",
"ltimeStart":"21245695",
"ltimeStop":"21250041",
"ldate_null":"19900101",
"product":"1",
"server_name":"OPRISK_DATACOLLECTOR",
"cell_context_id":"538044",
"operation_key":"100",
"operation_sub_num":"-1"
}
}
}

Search Key in Nested json in Dart/Flutter

I want to search the key "AylaHeartBeatFrequency" inside nested json. how to search and get its value ? in flutter/dart
{
"sAWSIoT": {
"CloudStatus": 1,
"PairingFlag": 0,
},
"sDebug": {
"LocalDebugMsg_d": "Model ID",
"AylaHeartBeatFrequency": 0
},
"Product": {
"Mode": 1,
"Model": "abc"
},
"data": {
"DeviceType": 300,
"Endpoint": 0,
"UniID": "0000000000000000"
}
}
You can do:
var map = /*put your json here. You can use json.decode() on the json if it's not yet formatted*/, value;
for(var item in map.values) {
if(item.containsKey('AylaHeartBeatFrequency') value = item['AylaHeartBeatFrequency']) ;
}

Invisible chart area during print and in exported PDF file in spreadsheet created by service account with Google Sheets API (Node.js) in shared folder

I'm creating a spreadsheet in Node.js environment in shared folder using service account with Google Sheets API v.4 in few steps:
Create spreadsheet itself in shared folder with "Can Edit" permission for service account.
Inserting some data and performing some text formats using spreadsheet ID received as callback from previous step.
Inserting chart using as income data the data inserted in prevoius step.
As the result I have a spreadsheet with expected result (text data and horizontal bar chart on same sheet). But when I'm trying to send it on printer, or download as PDF-file - chart area becomes completely invisible. I didn't find any option in official documentation about possible chart visibility during printing or something like this. And when I'm replacing this created chart with manually created one - everything is ok, I can print it and export to PDF.
So, what is the problem? Am I missing something? Or it's some bug?
index.js
const fs = require('fs');
const { google } = require('googleapis');
const express = require('express');
const bodyParser = require("body-parser");
const app = express();
const PORT = 3000;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.listen(PORT, () => {
console.log(`Server started at http://localhost:${PORT}`)
})
const SCOPES = ['https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/spreadsheets'];
const FOLDER_ID = '1xG3xHhrucB4AGLmnd8T2TmCyqhmPux5Q';
var timeStamp = new Date().getTime();
console.log(`timeStamp at startup = ${timeStamp}`);
const auth = new google.auth.GoogleAuth({
keyFile: 'credentials.json',
scopes: SCOPES
});
process.env.HTTPS_PROXY = 'http://10.5.0.20:3128';
const sheets = google.sheets({
version: 'v4',
auth: auth,
proxy: 'http://10.5.0.20:3128'
});
const drive = google.drive({
version: 'v3',
auth: auth,
proxy: 'http://10.5.0.20:3128'
});
function createFileName() {
const now = new Date();
let date = String(now.toISOString().slice(0, 10));
let hours = String(now.getHours()).padStart(2, "0");
let minutes = String(now.getMinutes()).padStart(2, "0");
let seconds = String(now.getSeconds()).padStart(2, "0");
let humanDate = date.replaceAll('-', '.');
humanDate = `${humanDate}_${hours}-${minutes}-${seconds}`;
return humanDate;
}
async function saveFileLocally(filePath, data) {
fs.writeFile(filePath, JSON.stringify(data), error => {
if (error) {
console.error(error);
return;
}
});
return true;
}
app.get("/check", (req, res) => {
res.send('server is online...');
});
app.post("/motivation", async (req, res) => {
if(!req.body) return res.sendStatus(400);
try {
const prizv = req.body.prizv;
const name = req.body.name;
const father = req.body.father;
const sex = req.body.sex;
const age = req.body.age;
const factors = req.body.factors;
const testName = 'motivation';
const clientData = { prizv: prizv, name: name, father: father, sex: sex, age: age, factors: factors, testName: testName };
const fileName = `${createFileName()}_${prizv}`;
const filePath = `files/${testName}/${fileName}.txt`;
const isSaved = await saveFileLocally(filePath, clientData);
if (isSaved) {
console.log(`file is saved locally....`);
const sheetID = await createSheetToGoogleDIsk(clientData, fileName);
res.send(sheetID);
}
} catch (error) {
console.log(error)
}
});
async function createSheetToGoogleDIsk(clientData, fileName) {
const file = fileName;
var sheetsMetadata = {
name: file,
mimeType: 'application/vnd.google-apps.spreadsheet',
parents: [FOLDER_ID]
};
const res2 = drive.files.create({
resource: sheetsMetadata,
fields: 'id'
}, function (err, file) {
if (err) {
console.error(err);
} else {
console.log('SheetID: ', file.data.id);
const gSheetID = file.data.id;
pasteDataToGoogleSheet(clientData, gSheetID);
insertChartToGoogleSheet(gSheetID);
return file.data.id;
}
});
}
async function insertChartToGoogleSheet(spreadsheetId) {
spreadsheetId = spreadsheetId;
let requests = [];
// set font size for whole Sheet as 14
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 100,
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 13,
},
},
},
"fields": "userEnteredFormat.textFormat.fontSize"
},
});
// set header text format as Bold and 18 pt
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 2,
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 18,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
// set subheader text format as Bold and 15 pt
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 3,
"endRowIndex": 4,
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 15,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
// set client data as Bold
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 5,
"endRowIndex": 10,
"startColumnIndex": 3,
"endColumnIndex": 5
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 13,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
// set 1st column width as 20px
requests.push({
"updateDimensionProperties": {
"range": {
"sheetId": 0,
"dimension": "COLUMNS",
"startIndex": 0,
"endIndex": 1
},
"properties": {
"pixelSize": 20
},
"fields": "pixelSize"
}
});
// set 4st column width as 150px
requests.push({
"updateDimensionProperties": {
"range": {
"sheetId": 0,
"dimension": "COLUMNS",
"startIndex": 3,
"endIndex": 4
},
"properties": {
"pixelSize": 150
},
"fields": "pixelSize"
}
});
// set bold factors Values
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 33,
"endRowIndex": 45,
"startColumnIndex": 4,
"endColumnIndex": 5
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 13,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
requests.push({
"addChart": {
"chart": {
"chartId": 1,
"spec": {
"titleTextFormat": {
},
"basicChart": {
"chartType": "BAR",
"axis": [
{
"position": "BOTTOM_AXIS",
},
{
"position": "LEFT_AXIS",
}
],
"domains": [
{
"domain": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 33,
"endRowIndex": 45,
"startColumnIndex": 1,
"endColumnIndex": 2
}
]
},
},
}
],
"series": [
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 33,
"endRowIndex": 45,
"startColumnIndex": 4,
"endColumnIndex": 5
}
]
}
},
"targetAxis": "BOTTOM_AXIS"
}
],
},
},
"position": {
"overlayPosition": {
"anchorCell": {
"sheetId": 0,
"rowIndex": 11,
"columnIndex": 1
},
"offsetXPixels": 0,
"offsetYPixels": -7,
"widthPixels": 800,
"heightPixels": 450
},
},
"border": {
"color": {
"red": 1,
"green": 1,
"blue": 1,
"alpha": 0
},
}
}
}
});
const batchUpdateRequest = { requests };
sheets.spreadsheets.batchUpdate({
spreadsheetId,
resource: batchUpdateRequest,
}, (err, result) => {
if (err) {
// Handle error
console.log(err);
return false
} else {
console.log(`${result.updatedCells} chart inserted`);
return spreadsheetId
}
});
}
async function pasteDataToGoogleSheet(clientData, sheetId) {
ecxelID = sheetId;
let data1 = [
["Тест «Мотиваційний особистісний профіль»"], [""], ["Результати тестування"], [""], ["Прізвище"], ["Імя"], ["По-батькові"], ["Вік"], ["Стать"]
];
let data2 = [
[clientData.prizv], [clientData.name], [clientData.father], [clientData.age], [clientData.sex]
];
let factorsLabels1_6 = [
["1. Матеріальна винагорода:"], ["2. Комфортні умови:"], ["3. Структурованість роботи:"], ["4. Соціальні контакти:"], ["5. Довірливі стосунки:"], ["6. Визнання:"]
];
let factors1_6 = [
[clientData.factors.factor1], [clientData.factors.factor2], [clientData.factors.factor3], [clientData.factors.factor4], [clientData.factors.factor5], [clientData.factors.factor6]
];
let factorsLabels7_12 = [
["7. Досягнення мети:"], ["8. Влада і вплив:"], ["9. Відсутність рутини:"], ["10. Креативність:"], ["11. Самовдосконалення і розвиток:"], ["12. Цікава і корисна діяльність:"]
];
let factors7_12 = [
[clientData.factors.factor7], [clientData.factors.factor8], [clientData.factors.factor9], [clientData.factors.factor10], [clientData.factors.factor11], [clientData.factors.factor12]
];
const data = [{
range: "B2:B10",
values: data1,
},
{
range: "D6:D10",
values: data2,
},
{
range: "B34:B39",
values: factorsLabels1_6,
},
{
range: "E34:E39",
values: factors1_6,
},
{
range: "B40:B45",
values: factorsLabels7_12,
},
{
range: "E40:E45",
values: factors7_12,
}
];
const resource = {
data,
valueInputOption: 'RAW',
};
sheets.spreadsheets.values.batchUpdate({
spreadsheetId: ecxelID,
resource: resource,
}, (err, result) => {
if (err) {
// Handle error
console.log(err);
return false
} else {
console.log(`${result.updatedCells} cells data inserted`);
return spreadsheetId;
}
});
}
I could confirm your situation. In this case, how about the following modification?
From:
"offsetXPixels": 0,
"offsetYPixels": -7,
"widthPixels": 800,
"heightPixels": 450
To:
"offsetXPixels": 0,
"offsetYPixels": 0, // Modified
"widthPixels": 800,
"heightPixels": 450
or
"widthPixels": 800,
"heightPixels": 450
When the values of offsetXPixels and offsetYPixels are the negative values, it was found that such an issue occurs.
When the values of offsetXPixels and offsetYPixels are 0, these values are not required to be included because of the default value.
Note:
When I tested the above modification, I could confirm that your issue could be removed.
Reference:
EmbeddedObjectPosition

Flutter list query

Im trying to check a list inside list and then show it as ViewList
for example
const Sport = [
{
"Name": "James",
"SportTaq": ["Soccer", "American football"],
},
];
and then check list witch include loud Soccer
print(Sport.where((item) => item["SportTaq"].contains("Soccer")));
but it did not work can you help me with it please
You can do something like this:
void main() {
const Sport = [
{
"Name": "James",
"SportTaq": ["Soccer", "American football"],
},
{
"Name": "Bob",
"SportTaq": ["American football","basketball"],
},
];
print(Sport.where((item) {
List sports = item["SportTaq"];
return sports.contains("Soccer");
}).toList());
}

How to group items by month in ionic 2?

I have a data collection that i want to group by month for a calendar list view with dividers like the attached image. How to do this in ionic 2?
{
"data": [
{
"id": "75",
"title": "Oudergesprekken",
"startDate": "18-01-2017",
},
{
"id": "76",
"title": "Talentmiddag",te ontdekken.</p>",
"startDate": "25-01-2017",
},
{
"id": "77",
"title": "Studiedag team, alle kinderen vrij!",
"startDate": "06-02-2017",
},
{
"id": "79",
"title": "Letterfeest groep 3",
"startDate": "14-02-2017",
},
{
"id": "78",
"title": "Voorjaarsvakantie",
"startDate": "24-02-2017",
}
]
At the moment i have an filter pipe
#Pipe({
name: "filter",
pure: false
})
export class ArrayFilterPipe implements PipeTransform {
transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
return items.filter(item => {
for (let field in conditions) {
if (item[field] !== conditions[field]) {
return false;
}
}
return true;
});
}
}
and in the template ill do this.
<ion-item-group *ngFor="let maand of maanden" >
<ion-item-divider sticky>{{maand.title}}</ion-item-divider>
<ion-item *ngFor="let item of agendaItems | filter:{ maandNum:maand.id }" >
{{ item.title }}
</ion-item>
</ion-item-group>
The pipe groups the items with an months array that's works fine but shows dividers of months with no have any data and if there are items that are in 2 different years in the same month this group by not working propaly.
I'd like to have usefull data when programming in front-end. There are a few ways to handle the data you recieved. In my opinion it's the easiest way to manipulate the data you've got, so you are able to iterate through that month array, like following :
Your component
export class YourComponent {
public months: any = [];
public data: any = [];
constructor() {
this.data = [
{
'id': '75',
'title': 'Oudergesprekken',
'startDate': '18-01-2017',
},
{
'id': '76',
'title': 'Talentmiddag,te ontdekken.</p>',
'startDate': '25-01-2017',
},
{
'id': '77',
'title': 'Studiedag team, alle kinderen vrij!',
'startDate': '06-02-2017',
},
{
'id': '79',
'title': 'Letterfeest groep 3',
'startDate': '14-02-2017',
},
{
'id': '78',
'title': 'Voorjaarsvakantie',
'startDate': '24-02-2017',
}
];
}
ngOnInit() {
this.data.forEach( (event) => {
let monthNumber = this.getMonthNumber(event);
if (this.months[monthNumber] === null||undefined ) this.months[monthNumber].events = [];
this.months[monthNumber].events.push(event);
});
}
private getMonthNumber(event: any): number {
return event.startDate.split('-')[1];
}
public getMonthName(monthNumber: any): number {
let maanden = [ {"id": 1, "title": "Januari"}, {"id": 2, "title": "Februari"}, {"id": 3, "title": "Maart"}, {"id": 4, "title": "April"}, {"id": 5, "title": "Mei"}, {"id": 6, "title": "Juni"}, {"id": 7, "title": "Juli"}, ...... ];
maanden.forEach((maand) => {
if ( maand.id === monthNumber) return maand.title;
});
}
}
Your HTML
<ion-item-group *ngFor="let month of months" >
<ion-item-divider sticky *ngIf='month.events.length > 0'>{{getMonthName()}}</ion-item-divider>
<ion-item *ngFor="let event of month.events | filter:{ maandNum:months.indexOf(month) }" >
{{ item.title }}
</ion-item>
</ion-item-group>
I did not test this, so I'll keep an eye on this one. How this make some clear.