IndexedDB with Wappler

[s.alpaslan]

Hi @patrick ,

I have an application that uses IndexedDB. Wappler can’t work yet with IndexedDB. However, I have prepared the following function for this.

function getAllContacts(db) {
    var request = window.indexedDB.open("ngDataBase-5016456", 6);
    request.onsuccess = function (event) {
        db = request.result;
        const txn = db.transaction(["messages"]);
        const objectStore = txn.objectStore('messages');
        objectStore.openCursor().onsuccess = (event) => {
            let cursor = event.target.result;
            if (cursor) {
                let contact = cursor.value;
                console.log(contact);
                // continue next record
                cursor.continue();
            }
        };
    }
    // close the database connection
    request.oncomplete = function () {
        db.close();
    };
}

The function returns the result in this way and in the following figure.

I want to use the data from here in Wappler as if it were a database query. So I want to transfer it to Wappler, can you show me a way to do that?

[s.alpaslan]

hi @Teodor ,

I think I need your support. It returns an array as you see above. I need to use this array in a repeater in wappler. However, despite trying everything, I couldn’t get a result. There seems to be a problem that I don’t think I’ve encountered before.

1. I can get the value in the array with dmx.app.data.arr1 (I can’t get it with dmx.app.data.content.arr1)
   
   
   
   
2. dmx.parse(‘arr1’) returns array values in chrome console, but when I use this value in repeater, unfortunately the loop works but I cannot reach the values because repeater returns something different.
3. I also see the result when I test the first return value from the console to check the returned values.
   {{dmx.app.data.arr1[0].id}}
   
   I use this line in the same way in the project, but nothing appears on the screen.
   
   here it should have written as “Son Güncellemeler - 1233877490226033”
   
   Need your support on this issue. what am i missing?

[bpj]

You don’t need dmx.app.data when accessing on-page. Just use arr1[0].id

[s.alpaslan]

yes, I tried that, and that’s the problem that confuses me anyway. Why can’t I see the value I see in the console in the project, it’s very strange.

[bpj]

The root of data on the page is the dmx.app.data level. To see the data as the page sees it you can use dmx.parse() in console
i.e. dmx.parse("arr1[0].id")

[s.alpaslan]

Yes, I am getting results in console. there is no problem with that. What confuses me is why I can’t get the result I get from the console in the project.

console result

inside project

[bpj]

And you’ve definitely deployed the change made to the page? And emptied the cache?

[s.alpaslan]

of course …

[s.alpaslan]

There is an interesting bug. I think only @Teodor or @patrick can understand this. Do you have another idea?

[bpj]

Have you tried changing the static text in the h3 to make sure the page is not showing a cached version?

i.e.

<h3>Testing Son Güncellemeler - {{arr1[0].id}}</h3>

Make sure the word ‘Testing’ displays on page

[s.alpaslan]

it’s ok with cache because I tried this situation many times…hope @patrick or @Teodor reply soon

[bpj]

Just out of interest, could you try it with one of the other values such as peer?

E.g. arr1[0].peer

[s.alpaslan]

yeap ,

[patrick]

Does it render after calling dmx.requestUpdate()?

[s.alpaslan]

yeap , it doesnt render

[patrick]

How is the data being set and how do you use it in the repeater?

Something like the following should work, inside the repeat you access the properties of the repeater object directly.

<ul is="dmx-repeat" repeat="arr1">
  <li>{{id}}</li>
</ul>

For setting the data you should never access the dmx.app.data directly. Use dmx.app.set('arr1', contacts) to set the data. The dmx.app is only available when the app is initialized, if you want to store some data before this then you can store it in the global scope using dmx.global.set('arr1', contacts).

Also make sure you have no other component on the page with an id arr1.

[s.alpaslan]

Hi @patrick ,
When I remove the repeater below and I want to get a single data, there is no problem. However, when I use arr1 with a repeater, I get a browser “out of memory” error (I’m only shooting 30 lines. There aren’t many more)

Render process gone

<h3>Testing Son Güncellemeler - {{arr1[0].id}}</h3>

<div class="theme-title">
                    <h3>Testing Son Güncellemeler - {{arr1[0].id}}</h3>
                </div>
                <div class="status-content" dmx-repeat:repeat3="arr1">
                    <ul>
                        <li class="user-status"><a class="lightbox img-status status" href="#statusbox"><img class="img-fluid bg-img" src="/assets/images/status-img/small/sm-1.jpg" alt="status" /></a>
                            <div class="lightbox-target" id="statusbox"><img src="/assets/images/status-img/large/lg-1.jpg" alt="status" /><a class="lightbox-close" href="#"></a></div>
                        </li>
                        <li>
                            <h5>{{message}}</h5>
                            <p>today , 8:30am</p>
                        </li>
                    </ul>
                </div>

function that runs when the page is loaded

function ngGetContacts() {

    var messageSession = api.readDbSession('905324454942', 0, null,

        function on_read(count) {

            console.log("Read " + count + " number of messages");

            var messages = messageSession.getMessages();

            console.log(messages);

            dmx.global.set('arr1', messages);

        });

    messageSession.enableReadReceipt(true);

    messageSession.read();

}

[s.alpaslan]

@patrick ,

Removing this code fixes the memory problem.
dmx.global.set('arr1', messages);

[patrick]

Then the messages probably contains circular references. You should only set plain arrays and objects as data, not any classes or complex objects with references on it.

[s.alpaslan]

that is, when retrieving data from indexedDB, it should be a plain array? have I got it right ?
But the results returned from indexedDB are returned as an array with objects such as NoSQL. ??? I don’t know how to handle this