Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Tobster_
Posts: 268
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

How to order JSON by date in QML

Hello, 

 

I was wondering how I would go about ordering JSON data by date?

 

Here is the code that I am currently using to order by date:

 

ListView {
                            id: listView1
                            dataModel: dataModel1
                            
                            leadingVisual: [
                                Container {
                                    id: dropDownContainer1
                                    topPadding: 20
                                    leftPadding: 20
                                    rightPadding: 20
                                    bottomPadding: 20
                                    background: Color.create("#212121")
                                    DropDown {
                                        id: dropDown1
                                        title: qsTr("Date:") + Retranslate.onLocaleOrLanguageChanged
                                        Option {
                                            id: all
                                            text: qsTr("All") + Retranslate.onLocaleOrLanguageChanged
                                            selected: true
                                        }
                                        Option {
                                            text: qsTr("12/06/2014")
                                            value: "12/06/2014"
                                        }
                                        Option {
                                            text: qsTr("13/06/2014")
                                            value: "13/06/2014"
                                        }
                                        Option {
                                            text: qsTr("14/06/2014")
                                            value: "14/06/2014"
                                        }
                                        Option {
                                            text: qsTr("15/06/2014")
                                            value: "15/06/2014"
                                        }
                                        Option {
                                            text: qsTr("16/06/2014")
                                            value: "16/06/2014"
                                        }
                                        Option {
                                            text: qsTr("17/06/2014")
                                            value: "17/06/2014"
                                        }
                                        Option {
                                            text: qsTr("18/06/2014")
                                            value: "18/06/2014"
                                        }
                                        Option {
                                            text: qsTr("19/06/2014")
                                            value: "19/06/2014"
                                        }
                                        Option {
                                            text: qsTr("20/06/2014")
                                            value: "20/06/2014"
                                        }
                                        Option {
                                            text: qsTr("21/06/2014")
                                            value: "21/06/2014"
                                        }
                                        Option {
                                            text: qsTr("22/06/2014")
                                            value: "22/06/2014"
                                        }
                                        Option {
                                            text: qsTr("23/06/2014")
                                            value: "23/06/2014"
                                        }
                                        Option {
                                            text: qsTr("24/06/2014")
                                            value: "24/06/2014"
                                        }
                                        Option {
                                            text: qsTr("25/06/2014")
                                            value: "25/06/2014"
                                        }
                                        Option {
                                            text: qsTr("26/06/2014")
                                            value: "26/06/2014"
                                        }
                                        Option {
                                            text: qsTr("28/06/2014")
                                            value: "28/06/2014"
                                        }
                                        Option {
                                            text: qsTr("29/06/2014")
                                            value: "29/06/2014"
                                        }
                                        Option {
                                            text: qsTr("30/06/2014")
                                            value: "30/06/2014"
                                        }
                                        Option {
                                            text: qsTr("01/07/2014")
                                            value: "July 1 2014"
                                        }
                                        Option {
                                            text: qsTr("04/07/2014")
                                            value: "July 4 2014"
                                        }
                                        Option {
                                            text: qsTr("05/07/2014")
                                            value: "July 5 2014"
                                        }
                                        Option {
                                            text: qsTr("08/07/2014")
                                            value: "July 8 2014"
                                        }
                                        Option {
                                            text: qsTr("09/07/2014")
                                            value: "July 9 2014"
                                        }
                                        
                                        onSelectedIndexChanged: {
                                            if (selectedOption == all) {
                                                dropDownDataSource1.sQuery = ""
                                            } else
                                                dropDownDataSource1.sQuery = dropDown1.at(dropDown1.selectedIndex).value;
                                        }
                                        onSelectedOptionChanged: {
                                            loadMask.visible = true
                                            myActivityIndicator.visible = true;
                                            myActivityIndicator.start();
                                        }
                                    }
                                }
                            ]
                            
                            listItemComponents: [
                                ListItemComponent {
                                    type: "item"
                                    StandardListItem {
                                        title: ListItemData.fixtureInfo
                                        description: Qt.formatTime(new Date(ListItemData.timestamp * 1))
                                    }
                                }
                            ]
                            
                            onTriggered: {
                                var selectedItem = dataModel1.data(indexPath);
                                var detail = fixtures.createObject();
                                
                                detail.fixtureInfo = selectedItem.fixtureInfo
                                detail.dateInfo = selectedItem.dateInfo
                                detail.timeInfo = selectedItem.timeInfo
                                detail.timeZone = Qt.formatTime(new Date(selectedItem.timestamp * 1))
                                detail.stadiumInfo = selectedItem.stadiumInfo
                                detail.resultInfo = selectedItem.resultInfo
                                
                                navigationPane1.push(detail)
                            }
                        }


attachedObjects: [
                // Definition of the second Page, used to dynamically create the Page above.
                GroupDataModel {
                    id: dataModel1
                    sortingKeys: [ "dateNumber", "id" ]
                    grouping: ItemGrouping.ByFullValue
                    sortedAscending: false
                    onItemAdded: {
                        myActivityIndicator.stop();
                        myActivityIndicator.visible = false;
                        loadMask.visible = false;
                        searchingLabel.visible = false;
                    }
                },
                DataSource {
                    id: dataSource1
                    property string sQuery: ""
                    onSQueryChanged: {
                        dataModel1.clear()
                        load()
                    }
                    source: "http://tundracorestudios.co.uk/BlackBerry%20App%20Development/Goal%202014/Fixtures.json"
                    type: DataSourceType.Json
                    
                    onDataLoaded: {
                        //create a temporary array tohold the data
                        var tempdata = new Array();
                        for (var i = 0; i < data.length; i ++) {
                            
                            tempdata[i] = data[i]
                            
                            //this is where we handle the search query
                            if (sQuery == "") {
                                //if no query is made, we load all the data
                                dataModel1.insert(tempdata[i])
                            } else {
                                //if the query matches any part of the country TITLE, we insert that into the list
                                //we use a regExp to compare the search query to the COUNTRY TITLE (case insenstive)
                                if (data[i].fixtureInfo.search(new RegExp(sQuery, "i")) != -1) {
                                    dataModel1.insert(tempdata[i])
                                    
                                    //Otherwise, we do nothingand donot insert the item
                                }
                            
                            }
                        
                        }
                        
                        // this if statement below does the same as above,but handles the output if there is only one search result
                        if (tempdata[0] == undefined) {
                            tempdata = data
                            
                            if (sQuery == "") {
                                dataModel1.insert(tempdata)
                            } else {
                                if (data.fixtureInfo.search(new RegExp(sQuery, "i")) != -1) {
                                    dataModel1.insert(tempdata)
                                }
                            }
                        }
                    }
                    onError: {
                        internetFailedToast.show();
                        myActivityIndicator.stop();
                        myActivityIndicator.visible = false;
                        loadMask.visible = false;
                        searchingLabel.visible = false;
                        dataSource1.remote = false;
                        dataSource1.source = "asset:///JSON/Fixtures.json";
                        dataSource1.load();
                        dropDownContainer1.visible = false;
                        console.log(errorMessage)
                    }
                },
                DataSource {
                    id: dropDownDataSource1
                    property string sQuery: ""
                    onSQueryChanged: {
                        dataModel1.clear()
                        load()
                    }
                    source: "http://tundracorestudios.co.uk/BlackBerry%20App%20Development/Goal%202014/Fixtures.json"
                    type: DataSourceType.Json
                    
                    onDataLoaded: {
                        //create a temporary array tohold the data
                        var tempdata = new Array();
                        for (var i = 0; i < data.length; i ++) {
                            
                            tempdata[i] = data[i]
                            
                            //this is where we handle the search query
                            if (sQuery == "") {
                                //if no query is made, we load all the data
                                dataModel1.insert(tempdata[i])
                            } else {
                                //if the query matches any part of the country TITLE, we insert that into the list
                                //we use a regExp to compare the search query to the COUNTRY TITLE (case insenstive)
                                if (data[i].dateNumber.search(new RegExp(sQuery, "i")) != -1) {
                                    dataModel1.insert(tempdata[i])
                                    
                                    //Otherwise, we do nothingand donot insert the item
                                }
                            
                            }
                        
                        }
                        
                        // this if statement below does the same as above,but handles the output if there is only one search result
                        if (tempdata[0] == undefined) {
                            tempdata = data
                            
                            if (sQuery == "") {
                                dataModel1.insert(tempdata)
                            } else {
                                if (data.dateNumber.search(new RegExp(sQuery, "i")) != -1) {
                                    dataModel1.insert(tempdata)
                                }
                            }
                        }
                    }
                    onError: {
                        myActivityIndicator.stop();
                        myActivityIndicator.visible = false;
                        loadMask.visible = false;
                        searchingLabel.visible = false;
                        dataSource1.remote = false;
                        dataSource1.source = "asset:///JSON/Fixtures.json";
                        dataSource1.load();
                        console.log(errorMessage)
                    }
                },
                
                ComponentDefinition {
                    id: fixtures
                    source: "FixturesDetail.qml"
                },
                SystemToast {
                    id: internetFailedToast
                    body: qsTr("Connection to the internet has failed. Loading local file...")
                }
            ]
            onCreationCompleted: {
                dataSource1.load();
                startLoading();
            }

 

JSON:

 

[
  {
    "type":"item",
    "id":"1",
    "dateNumber":"12/06/2014",
    "fixtureInfo":"Brazil vs Croatia ",
    "dateInfo":"Thursday 12 June 2014",
    "timeInfo":"17:00",
    "timestamp":"1402603200000",
    "stadiumInfo":"Arena de Sao Paulo",
    "resultInfo":"Brazil won 3-1"
  }
]

 However, by doing it this way, I have to use two different formats (12/06/2014 & July (13/07/2014) ) just so it shows them in order. I would really like to be able to use just one format (e.g. Sat Jul 26 2014).

 

I'm having the same issue with ordering an RSS feed:

 

ListView {
                            id: myListView
                            dataModel: myDataModel
                            listItemComponents: [
                                ListItemComponent {
                                    type: "item"
                                    // Custom List compoents
                                    Container {
                                        Container {
                                            Header {
                                                title: qsTr(ListItemData.pubDate)
                                            }
                                        }
                                        Divider {
                                        }
                                    }
                                },
                                ListItemComponent {
                                    type: "item"
                                    
                                    StandardListItem {
                                        title: ListItemData.title
                                    }
                                }
                            ]
                            onTriggered: {
                                var feedItem = dataModel.data(indexPath);
                                var page = detailsPage.createObject();
                                page.htmlContent = "http://www.readability.com/m?url=" + feedItem.link;
                                page.newsLink = feedItem.link;
                                
                                navigationPane4.push(page);
                            }
                        }

 

attachedObjects: [
                GroupDataModel {
                    id: myDataModel
                    sortedAscending: false
                    sortingKeys: [ "pubDate" ]
                    grouping: ItemGrouping.ByFullValue
                    onItemAdded: {
                        internetFailedContainer.visible = false;
                    }
                },
                DataSource {
                    id: myDataSource
                    source: "http://www.fifa.com/worldcup/news/rss.xml"
                    query: "/rss/channel/item"
                    type: DataSourceType.Xml
                    onDataLoaded: {
                        myDataModel.clear();
                        myDataModel.insertList(data)
                    }
                    onError: {
                        internetFailedContainer.visible = true;
                    }
                },
                ComponentDefinition {
                    id: detailsPage
                    source: "asset:///NewsDetail.qml"
                },
                SystemToast {
                    id: refreshToast
                    body: qsTr("Refreshed") + Retranslate.onLocaleOrLanguageChanged
                }
            ]
            onCreationCompleted: {
                myDataSource.load();
            }

 

Any help with this would be great. 

 

Thanks in advance :smileyhappy:

Developer
Benecore
Posts: 540
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....

Re: How to order JSON by date in QML

Hi

I see that you have timestamp in your JSON, so instead of sorting by dateNumber sort by timestamp



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Tobster_
Posts: 268
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: How to order JSON by date in QML

Hi, 

 

If I set the sortingKeys to "timeStamp", "id" then it sorts it in the correct order but the headers are the actual time stamp in numerical value (e.g. 1402603200000) rather than Thursday 12 June 2014. 

 

To fix this, I think I need to somehow sort by the onTriggered code I am using in the QML, but I cannot figure out how to do it:

 

detail.timeZone = Qt.formatTime(new Date(selectedItem.timestamp * 1))

 

Developer
Benecore
Posts: 540
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....

Re: How to order JSON by date in QML

So create a ListItemComponent with type: "header" and then use Header component and set the title (ListItemData) as you wrote above


If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Tobster_
Posts: 268
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: How to order JSON by date in QML

Okay, I'll do that now but what do I set the sorting keys as?
Developer
Benecore
Posts: 540
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....

Re: How to order JSON by date in QML

Sorting keys set by timestamp and then add another "header" type item.
For example:
For example:

ListItemComponent{
type: "header"
Header{
title: Qt.formatTime(new Date(ListItemData.timestamp), "your own format")
}
}

Hope it helps :smileywink:


If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Tobster_
Posts: 268
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: How to order JSON by date in QML

[ Edited ]

So I currently have this: 

 

listItemComponents: [
                                ListItemComponent {
                                    type: "item"
                                    StandardListItem {
                                        title: ListItemData.fixtureInfo
                                        description: Qt.formatTime(new Date(ListItemData.timestamp * 1))
                                    }
                                }
                            ]

 

 

Do I change it to this: 

 

listItemComponents: [
                                ListItemComponent {
                                    type: "item"
                                    Container {
                                        Header {
                                            title: Qt.formatDate(new Date(ListItemData.timestamp * 1))
                                        }
                                        StandardListItem {
                                            title: ListItemData.fixtureInfo
                                            description: Qt.formatTime(new Date(ListItemData.timestamp * 1))
                                        }
                                    }
                                }
                            ]

 or this:

listItemComponents: [
                                ListItemComponent {
                                    type: "header"
                                    Header {
                                        title: Qt.formatDate(new Date(ListItemData.timestamp * 1))
                                    }
                                },
                                ListItemComponent {
                                    type: "item"
                                    StandardListItem {
                                        title: ListItemData.fixtureInfo
                                        description: Qt.formatTime(new Date(ListItemData.timestamp * 1))
                                    }
                                }
                            ]

 & then add a type: "header" to the JSON somehow?:smileyhappy:

 

 

 

 

 

Developer
Benecore
Posts: 540
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....

Re: How to order JSON by date in QML

The last is good. You need two ListItemComponents. One for showing header if you have enabled ItemGrouping and another for show all other items.
You don't need to change anything in your JSON


If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Tobster_
Posts: 268
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: How to order JSON by date in QML

Okay :smileyhappy:

 

I changed it to:

 

listItemComponents: [
                                ListItemComponent {
                                    type: "header"
                                    Header {
                                        title: Qt.formatDate(new Date(ListItemData.timestamp * 1))
                                    }
                                },
                                ListItemComponent {
                                    type: "item"
                                    StandardListItem {
                                        title: ListItemData.fixtureInfo
                                        description: Qt.formatTime(new Date(ListItemData.timestamp * 1))
                                    }
                                }
                            ]

 With sorting keys:

 

sortingKeys: [ "timeStamp", "id" ]

 but there is no text on the header 

Developer
Benecore
Posts: 540
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....

Re: How to order JSON by date in QML

Yes, I think I made a mistake. For headers item is ListItemData string and not QVariantMap.
So instead of using ListItemData.timestamp use just ListItemData


If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog