Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewAnnouncements › JsonListModel -> Storage -> JsonListModel -> AppListView

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #25345

    Alexander

    Hi, I am trying to write JSON data of JsonListModel to Storage and display it to AppListView also using JsonListModel, nothing is working for me, what is my mistake? I have little experience, don’t judge my code strictly.

    import Felgo
    import QtQuick

    App {
    id:app
    Storage
    {
    id:storage
    clearAllAtStartup :true

    }

    JsonListModel {
    id:jsonModel_1

    property var jsonData_1: [

    {
    “name”: 1,
    “title”: “apple”,
    “text”: “green”
    },
    {
    “name”: 2,
    “title”: “tomato”,
    “text”: “red”

    },
    {
    “name”: 3,
    “title”: “banana”,
    “text”: “yellow”
    }

    ]
    keyField: “name”
    fields: [“title”,”text”,”name”]

    source: jsonData_1

    }

    JsonListModel {
    id:jsonModel_2

    property var jsonData_2: [

    {
    “name”: 1,
    “title”: “apple_2”,
    “text”: “green_2”
    },
    {
    “name”: 2,
    “title”: “tomato_2”,
    “text”: “red_2”

    },
    {
    “name”: 3,
    “title”: “banana_2”,
    “text”: “yellow_2”
    }

    ]
    keyField: “name”
    fields: [“title”,”text”,”name”]

    source:jsonData_2

    }

    AppListView {
    id:listView
    anchors.fill: parent
    model: jsonModel_1
    delegate:

    Rectangle {

    id:rec
    // property bool isFavorite: dataModel.isFavorite(model)
    //Component.onCompleted: dataModelfareBase.createModelForCategory (“public”)

    width: listView.width
    height: 70
    border.color: “black”
    border.width: 1
    Text {
    id: name
    text: model.title || {}
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    font.pixelSize: 30

    }

    RippleMouseArea {
    //Whether the ripple effect is used
    //This property determines whether the element accepts mouse events.
    anchors.fill: parent

    onClicked: {

    app.addToFavorites(model)
    }

    }

    }

    }

    //—————————————————————

    function addToFavorites(entry) {

    var favorites = storage.getValue(“favorites”)

    if (favorites === undefined) {
    favorites = []
    }

    console.log(entry[“title”])

    favorites.push(entry[“title”])

    //Saves the value with the provided key in storage permanently.
    //If an error occurs, a storage Error() message is issued.
    storage.setValue(“favorites”, favorites)
    }

    //————————————————————————–

    //show favorites
    function showFavorites() {

    //Deletes content by index from the model.
    //You can specify the number of elements to remove using the count argument.

    jsonModel_2.remove(0,jsonModel_2.count) // jsonModel_1.remove(0,jsonModel_1.count)

    var favorites = storage.getValue(“favorites”)

    if (favorites === undefined) {

    console.log(“Favorites not specified”)

    return
    }

    for (const entry of favorites) {

    jsonModel_2.append(entry) // jsonModel_1.append(entry)

    }

    }

    AppButton
    {
    id:button
    text: “favorites”
    flat: false
    backgroundColor: “white”
    borderColor: “gainsboro”
    textColor: “black”
    borderWidth: dp(0.7)

    anchors
    {

    horizontalCenter:parent.horizontalCenter
    bottom:parent.bottom

    bottomMargin:50

    }

    onClicked:{

    app.showFavorites()

    listView.model=jsonModel_2

    }

    }

    }

     

    #25346

    Bence
    Felgo Team

    Hi Alexander!

     

    The code you provided correctly displays a list for me. Is there an error message you’re getting with this code?

     

    Best,

    Bence

    #25347

    Alexander

    Hello, this is what I get in the console.

    “Unable to convert argument 0 to”
    “showFavorites@file:///Users/user/Library/Application Support/Felgo Live Client/experiment2/qml/Main.qml:209”

    file: experiment2/qml/Main.qml: 178 TypeError: Passing incompatible arguments to C++ functions from Java Script is not allowed.

    #25348

    Bence
    Felgo Team

    Hi,

    Please also let me know what those rows (178, and 209) include. Are those code snippets included in your code from above?

    Best,

    Bence

    #25349

    Alexander

    176    for (const entry of favorites) {

    178     jsonModel_2.append(entry) // jsonModel_1.append(entry)

    180    }

     

    206   onClicked:{

    209    app.showFavorites()

    212    listView.model=jsonModel_2

    215         }

     

    #25350

    Bence
    Felgo Team

    Hi Alexander,

    The JsonListModel and the actual Json data are two separate things, so you must be calling the appropriate Item or data for each use-case. To solve your issue with favoriting, you can make the following changes in your code.

    In the RippleMouseArea’s onClicked handler use:

    onClicked: index => {
    
              app.addToFavorites(jsonModel_1.jsonData_1[model.index])
            }

    and the showFavorites function:

      function showFavorites() {
    
        jsonModel_2.remove(
              0, jsonModel_2.count) // jsonModel_1.remove(0,jsonModel_1.count)
    
        var favorites = storage.getValue("favorites")
    
        if (favorites === undefined) {
    
          console.log("Favorites not specified")
    
          return
        }
        for (var entry in favorites) {
          jsonModel_2.append(favorites[entry]) // jsonModel_1.append(entry)
        }
      }

    You can see more on how best to use a JsonListModel, as well as how it works, here: https://felgo.com/doc/felgo-jsonlistmodel/

    #25351

    Alexander

    Thank you very much for your help!

    #25352

    Alexander

    But unfortunately, after making the changes, the result is the same, and the same error in the console.😔

    #25353

    Bence
    Felgo Team

    Hi Alexander,

    Here is the full working code for comparison, which correctly adds a favorite and shows the favorites list.

    import Felgo
    import QtQuick
    
    App {
      id: app
      Storage {
        id: storage
        clearAllAtStartup: true
      }
    
      JsonListModel {
        id: jsonModel_1
    
        property var jsonData_1: [{
            "name": 1,
            "title": "apple",
            "text": "green"
          }, {
            "name": 2,
            "title": "tomato",
            "text": "red"
          }, {
            "name": 3,
            "title": "banana",
            "text": "yellow"
          }]
        keyField: "name"
        fields: ["title", "text", "name"]
    
        source: jsonData_1
      }
    
      JsonListModel {
        id: jsonModel_2
    
        property var jsonData_2: [{
            "name": 1,
            "title": "apple",
            "text": "green"
          }, {
            "name": 2,
            "title": "tomato",
            "text": "red"
          }, {
            "name": 3,
            "title": "banana",
            "text": "yellow"
          }]
        keyField: "name"
        fields: ["title", "text", "name"]
    
        source: jsonData_2
      }
    
      AppListView {
        id: listView
        anchors.fill: parent
        model: jsonModel_1
        delegate: Rectangle {
    
          id: rec
    
          // property bool isFavorite: dataModel.isFavorite(model)
          //Component.onCompleted: dataModelfareBase.createModelForCategory (“public”)
          width: listView.width
          height: 70
          border.color: "black"
          border.width: 1
          Text {
            id: name
            text: model.title || {}
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 30
          }
    
          RippleMouseArea {
            //Whether the ripple effect is used
            //This property determines whether the element accepts mouse events.
            anchors.fill: parent
    
            onClicked: index => {
    
              app.addToFavorites(jsonModel_1.jsonData_1[model.index])
            }
          }
        }
      }
    
      //—————————————————————
      function addToFavorites(entry) {
    
        var favorites = storage.getValue("favorites")
    
        if (favorites === undefined) {
          favorites = []
        }
    
        console.log(entry)
    
        favorites.push(entry)
    
        //Saves the value with the provided key in storage permanently.
        //If an error occurs, a storage Error() message is issued.
        storage.setValue("favorites", favorites)
      }
    
      //————————————————————————–
    
      //show favorites
      function showFavorites() {
    
        //Deletes content by index from the model.
        //You can specify the number of elements to remove using the count argument.
        jsonModel_2.remove(
              0, jsonModel_2.count) // jsonModel_1.remove(0,jsonModel_1.count)
    
        var favorites = storage.getValue("favorites")
    
        if (favorites === undefined) {
    
          console.log("Favorites not specified")
    
          return
        }
        for (var entry in favorites) {
          jsonModel_2.append(favorites[entry]) // jsonModel_1.append(entry)
        }
      }
    
      AppButton {
        id: button
        text: "favorites"
        flat: false
        backgroundColor: "white"
        borderColor: "gainsboro"
        textColor: "black"
        borderWidth: dp(0.7)
    
        anchors {
    
          horizontalCenter: parent.horizontalCenter
          bottom: parent.bottom
    
          bottomMargin: 50
        }
    
        onClicked: {
    
          app.showFavorites()
    
          listView.model = jsonModel_2
        }
      }
    }
    

    Best,

    Bence

    #25354

    Alexander

    It worked, the body of addToFavorites() needed to be changed a little, thanks.👍

Viewing 10 posts - 1 through 10 (of 10 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded