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
Highlighted
Developer
Posts: 32
Registered: ‎04-21-2013
My Device: Z10, Z30
Accepted Solution

Help with ListView in QML - Loading from Json

I'm losing my mind here. I'm been struggling to get even the most basic json file loaded into a DataModel and populating a list. I think what I really need is an example of a complex Json file being dealt with, as that would provide a lot more insight to how these things work.

 

Here's my code:

import bb.cascades 1.3
import bb.data 1.0


Page {
    content: ListView {
        id: listView
        rootIndexPath: [2]
        dataModel: dataModel
        
        listItemComponents: [
            ListItemComponent {
                id: item
                type: "top"
                StandardListItem {
                    title: ListItemData.game.name
                    description: ListItemData.viewers
                }
            }
        ]
    }
    attachedObjects: [
        GroupDataModel {
            id: dataModel
        },
        DataSource {
            id: dataSource
            source: "sample.json"
            onDataLoaded: {
                dataModel.insertList(data)
                //console.log(data.top[0].name)
            }
            onError: {
                console.log("There was an error with DataSource")
            }
        }
    ]
    onCreationCompleted: {
        dataSource.load(); 
    }
}

 And here is sample.json:

{
  "_links": {
    "self": "https://api.twitch.tv/kraken/games/top?limit=25&offset=0",
    "next": "https://api.twitch.tv/kraken/games/top?limit=25&offset=25"
  },
  "_total": 322,
  "top": [
    {
      "game": {
        "name": "League of Legends",
        "box": {
          "large": "http://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends.jpg?w=272&h=380&fit=scale",
          "medium": "http://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends.jpg?w=136&h=190&fit=scale",
          "small": "http://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends.jpg?w=52&h=72&fit=scale",
          "template": "http://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends.jpg?w={width}&h={height}&fit=scale"
        },
        "logo": {
          "large": "http://static-cdn.jtvnw.net/ttv-logoart/League%20of%20Legends.jpg?w=240&h=144&fit=scale",
          "medium": "http://static-cdn.jtvnw.net/ttv-logoart/League%20of%20Legends.jpg?w=120&h=72&fit=scale",
          "small": "http://static-cdn.jtvnw.net/ttv-logoart/League%20of%20Legends.jpg?w=60&h=36&fit=scale",
          "template": "http://static-cdn.jtvnw.net/ttv-logoart/League%20of%20Legends.jpg?w={width}&h={height}&fit=scale"
        },
        "_links": {},
        "_id": 21779,
        "giantbomb_id": 24024
      },
      "viewers": 23873,
      "channels": 305
    }
  ]
}

 My goal is to show a list of names of games, along with viewers. How on earth do I do that? 

Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: Help with ListView in QML - Loading from Json

[ Edited ]

If this is the whole JSON file you have an error because it is not list but object.

Also, GroupDataModel have two type of items header and item not your top .

Try this code:

 

import bb.cascades 1.3
import bb.data 1.0


Page {
    content: ListView {
        id: listView
        dataModel: dataModel
        
        listItemComponents: [
            ListItemComponent {
                id: item
                type: "item"
                StandardListItem {
                    title: ListItemData.top[0].game.name
                    description: ListItemData.top[0].viewers
                }
            }
        ]
    }
    attachedObjects: [
        GroupDataModel {
            id: dataModel
            grouping: ItemGrouping.None
        },
        DataSource {
            id: dataSource
            source: "sample.json"
            onDataLoaded: {
                dataModel.insert(data)
                //console.log(data.top[0].name)
            }
            onError: {
                console.log("There was an error with DataSource")
            }
        }
    ]
    onCreationCompleted: {
        dataSource.load(); 
    }
}

 

 

 



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
Posts: 32
Registered: ‎04-21-2013
My Device: Z10, Z30

Re: Help with ListView in QML - Loading from Json

The Json file was not the problem as th code you provided worked when I pasted it in. Thank you so much, DataModels and DataSource classes are less confusing now I think!