[Patrik Dusek]

Hi all,

I’m trying to store the values of my JSONListModel to the storage. But I have no success with this.

localStorage.setValue("growers", JSON.stringify(favoritesStorage.source))

Does not work. Also not using stringify doesn’t work.

Is there a trick for that?

Thx,

Patrik

[AlexFelgo Team]

Hi Patrik,

does JSON.stringify work and output the desired format when you log it to the console? Unfortunately I will not really be able to investigate this without an actual example the produces the issue. In general, I see no issue with your piece of code, assuming favoritesStorage.source refers to an JS object that can be serialized.

Best,
Alex

[Patrik Dusek]

Hi Alex,

    function addFavoriteGrower(grower){
        console.log("adding: ", grower.kurz_name)//assigned
        favoritesStorage.append(grower)
        console.log("Store: ",JSON.stringify(favoritesStorage.source))//only [] output
        console.log("appended: ", favoritesStorage.count)//1
        localStorage.setValue("growers", JSON.stringify(favoritesStorage.source))
    }


    Storage {
        id: localStorage
        Component.onCompleted: {
          favoritesStorage.source = JSON.parse(localStorage.getValue("growers"))
          console.log("storage: ",favoritesStorage.source)
        }
      }

    JsonListModel {
        id: favoritesStorage
        keyField: "kurz_name"
        fields: ["kurz_name", "name", "region", "sub_region", "stars", "bio", "text1englisch", "text2englisch", "text3englisch", "street", "zip", "city", "internet", "status"]
        Component.onCompleted: {
        }
    }

I added the output on the add methode. The “grower” is an item from a similar JSONListModel.

BTW: Love you guys for this JSONListModel 🙂

thx,

Patrik

[AlexFelgo Team]

Hi Patrik,

I see, so the issue is that the source property does not reflect any changes to your JsonListModel performed by methods like append(). So you are trying to e.g. append and remove stuff and then store those changes in a storage, be reading the source property of the model.

First of all, the source property is really just for feeding data into the model. Any change in the source property will cause the model to analze the change and update the model accordingly. It does not work the other way round though, the source property will not reflect changes to the internal list.

You will have to iterate through the model, e.g. like this:

import QtQuick 2.5
import Felgo 3.0

App {
  NavigationStack {
    Page {
      title: "JSONListModel"

      AppButton {
        anchors.centerIn: parent
        text: "Append"
        onClicked: {
          addFavoriteGrower({kurz_name: "test " + Date.now()})
        }
      }
    }
  }

  function addFavoriteGrower(grower){
    console.log("adding: ", grower.kurz_name)
    favoritesStorage.append(grower)

    var data = []
    for(var i=0; i<favoritesStorage.count; i++) {
      data.push(favoritesStorage.get(i))
    }

    console.log("Store: ",JSON.stringify(data))
    localStorage.setValue("growers", JSON.stringify(data))
  }


  Storage {
    id: localStorage
    Component.onCompleted: {
      if(localStorage.getValue("growers")) {
        favoritesStorage.source = JSON.parse(localStorage.getValue("growers"))
      }
      console.log("storage: ",JSON.stringify(favoritesStorage.source))
    }
  }

  JsonListModel {
    id: favoritesStorage
    keyField: "kurz_name"
    fields: ["kurz_name", "name", "region", "sub_region", "stars", "bio", "text1englisch", "text2englisch", "text3englisch", "street", "zip", "city", "internet", "status"]
    Component.onCompleted: {
    }
  }
}

I will discuss with the team whether it is possible to access the whole internal list via a property or a function, and if we can add that to the next update, to avoid this additional iteration step.

Does the example above work for you and your usecase?

Best,
Alex

[Patrik Dusek]

Hi Alex,

works perfect 🙂

Thx,

Patrik