Some help around certain Javascript syntax

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at some frequently asked questions about us and our products!

Take a look at our YouTube channel and subscribe to be notified about new videos!

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Peter Bradstreet

Hi David,

In the example that you originally sent me, I have the report field being filled properly via the following function:

StartJS
var opts = {live: true, retry: true};
    window.App.RootScope.PouchDB2.replicate.to(CouchDB2, opts);
    window.App.RootScope.PouchDB2.replicate.from(CouchDB2, opts);

window.App.RootScope.PouchDB2.allDocs( {include_docs: true, descending: true},
  function(err, doc) {
    window.App.RootScope.NotesGrid.Data = [];
    for (var i = 0; i < doc.rows.length; i++) {
      window.App.RootScope.NotesGrid.Data.push(doc.rows[i].doc);
    }
    window.App.Scope.$apply();
  }
);
EndJS

However, I need to switch from using allDocs to a pouch (mango) query. I am able to successfully write the results of the query to the browser console via the following function:

StartJS
var opts = {live: true, retry: true};
    window.App.RootScope.PouchDB2.replicate.to(CouchDB2, opts);
    window.App.RootScope.PouchDB2.replicate.from(CouchDB2, opts);


window.App.RootScope.PouchDB2.createIndex({
  index: {fields: ['vesseltoken']}
}).then(
    function () {
      return window.App.RootScope.PouchDB2.find({selector: {vesseltoken: {$eq: '123456789'}}});
    })
   .then(
    function (res) {
      console.log(res);
    })
  .catch(console.error.bind(console));


EndJS

The console results are as follows:

StartJS
app.js:176 Start of noteSync app function<br>
app.js:176 StartJS<br>
app.js:176 End of noteSync app function<br>
app.js:176 End of Notes Show event<br>
docs: Array(5)<br>
0: {title: "Sunday 1", note: "1 Sunday", vesseltoken: "123456789", _id: "123456789:2019-03-03T13:41:03.480Z", _rev: "1-af8bae7336ccf9e8a931de9eb5e5ac57"}<br>
1: {title: "Offline test", note: "Added while offline", vesseltoken: "123456789", _id: "2019-03-02T23:19:42.440Z", _rev: "1-b493d7e978564c8a14a28e03feb37796"}<br>
2: {title: "Note 2", note: "Notes.....", vesseltoken: "123456789", _id: "2019-03-02T23:26:27.317Z", _rev: "1-a6d5b28fd4b9def3b4711dbab91da238"}<br>
3: {title: "Note 3", note: "333", vesseltoken: "123456789", _id: "2019-03-02T23:28:05.249Z", _rev: "1-fe29968dc433d1b927937f8c9d5112ea"}<br>
4: {title: "Note 4", note: "Notes for note 4", vesseltoken: "123456789", _id: "2019-03-03T01:30:45.049Z", _rev: "1-22c15f00f0c9021af8299b5224c8214f"}<br>
length: 5

I am now trying to push this data into the data report but am struggling to find the right syntax. I was wondering if you could point me in the right direction, I can't get the following function to compile?

StartJS
var opts = {live: true, retry: true};
    window.App.RootScope.PouchDB2.replicate.to(CouchDB2, opts);
    window.App.RootScope.PouchDB2.replicate.from(CouchDB2, opts);


window.App.RootScope.PouchDB2.createIndex({
  index: {fields: ['vesseltoken']}
}).then(
    function () {
      return window.App.RootScope.PouchDB2.find({selector: {vesseltoken: {$eq: '123456789'}}});
    })
   .then(function(docs) {
    window.App.RootScope.NotesGrid.Data = [];
    for (var i = 0; i < docs.rows.length; i++) {
      window.App.RootScope.NotesGrid.Data.push(docs.rows[i].doc);
    }
    window.App.Scope.$apply();
  }
));

EndJS

DecSoft

Hello Peter,

If I am not wrong, what you need is to change the below line:

for (var i = 0; i < docs.rows.length; i++) {

... to this other line:

for (var i = 0; i < docs.length; i++) {

Apparently you already have the expected array in "docs", so, you can iterate that variable, and not "rows", which maybe do not exists.

Note that you must also change the item addition, that is, change the below line:

 window.App.RootScope.NotesGrid.Data.push(docs.rows[i].doc);

... to this other line:

 window.App.RootScope.NotesGrid.Data.push(docs[i].doc);

Please, try it and post here if that works or what!

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, I am still getting the same result. If I use

StartJS
var opts = {live: true, retry: true};
    window.App.RootScope.PouchDB2.replicate.to(CouchDB2, opts);
    window.App.RootScope.PouchDB2.replicate.from(CouchDB2, opts);


window.App.RootScope.PouchDB2.createIndex({
  index: {fields: ['vesseltoken']};
}).then(
    function () {
      return window.App.RootScope.PouchDB2.find({selector: {vesseltoken: {$eq: '123456789'}}});
    })
   .then(
    function (res) {
      console.log(res);
    })
  .catch(console.error.bind(console));
EndJS

it outputs the array to the browser window however if I replace the snippet:

.then(
    function (res) {
      console.log(res);
    })
  .catch(console.error.bind(console));

With

.then(function(docs) {
    window.App.RootScope.NotesGrid.Data = [];
    for (var i = 0; i < docs.length; i++) {
      window.App.RootScope.NotesGrid.Data.push(docs[i].doc);
    }
    window.App.Scope.$apply();
  }
));

when I go to preview the app I just get a blank screen. The AB console results are then:

--------------------------------------------------------------------------------

App Builder saved debugger console
App name: dockit
Generated: 3/3/2019 3:02:56 PM

--------------------------------------------------------------------------------

Legend:

[a] App action
[n] Net request
[i] Information message
[w] Warning message
[e] Error message
[u] Unknow message
[+] Block start
[-] Block end

--------------------------------------------------------------------------------


[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\index.html", 1.64 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\builder\styles\default.css", 152.07 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\builder\styles\builder.css", 118.69 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\styles\scaled.css", 17.4 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\styles\base.css", 8.55 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\styles\dockit.css", 16.43 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\builder\scripts\builder.js", 812.21 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\cordova.js", 190 bytes
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\scripts\app.js", 128.72 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\scripts\pouchdb.js", 121.61 KB
[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\scripts\pouchdb.find.js", 160.7 KB
[e] Error: "Expected '}'" - Line: 2635 - Char: 33 - Code: 0 - Url: http://127.0.0.1:9999/app/scripts/app.js
[e] Error: "Unable to set property 'Cordova' of undefined or null reference" - Line: 6 - Char: 1 - Code: 0 - Url: http://127.0.0.1:9999/cordova.js
[e] Error: "'fetch' is undefined" - Line: 7 - Char: 51841 - Code: 0 - Url: http://127.0.0.1:9999/app/scripts/pouchdb.js

[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\app\scripts\pouchdb.authentication.min.js", 42.13 KB
[e] Error: "'Headers' is undefined" - Line: 2234 - Char: 1 - Code: 0 - Url: http://127.0.0.1:9999/app/scripts/pouchdb.find.js

[n] Resolved "C:\Users\peteb\OneDrive\Documents\AppBuilder\Apps\dockit\dockit_Compiled\www\builder\fonts\digital-7-mono.ttf", 33.6 KB

--------------------------------------------------------------------------------

©2019 App Builder by DecSoft

More information at https://www.decsoftutils.com/

--------------------------------------------------------------------------------

DecSoft

Hello Peter

Maybe I am blind (due to the hours here...) but the error that the console declares is more or less easy to catch, that is, there is a syntax error: an "}" is expected in the line 2635 - char 33 of the "app.js" file...

Please, look at the App menu and choose the element "App Javascript file", then goto the line and char that the error refer and see if there is a missing "}"... there must be a missing "}" char there, Peter...

P.S. Look at the Menu -> Tools -> Program options -> Editor... and check the "Show caret" option, so you can see the lines in the Javascript editor. If you can't catch the problem... please, send me the "app.js" file and I will try to tell you.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, I fixed a couple of small syntax issues using that method and I am not getting any errors now. the preview is working and when previewing it in Chrome, it is not populating the report with any rows but no errors are showing up in the browser console which seems strange. I realize that it is late over there so we can pick this up again tomorrow. Thanks for your help as always!

DecSoft

Hello Peter,

Yes; I am not in my PC right now... but please, sent to me the project file... so I can take a look here as quickly as possible. :-)

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello again,

On the other hand... are you change the Report's HTML variable? That is, according to the records that the Report must shown... someting like "Record.note" and "Record.title"... if I am not wrong...

Anyway, send to me the project file, Peter, and I will take a look.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, I am just going to upload the zip file and send you a link. I did change the report fields and they are getting populated if I show all records rather than find(). I will report back in a minute when the file is uploaded with the download url

Peter Bradstreet

Hi, it is uploading now and will just be a few minutes. https://mymarina.online/iPort/decsoft/dockit_Compiled.zip This is the beginning of my main app. On the home screen, click on the tools icon in the top left corner and then on the notes icon. It should show the filtered list of documents. Thanks!! Pete

DecSoft

Hello Peter,

I can try to take a look at the compiled files, but, I ask you for the project file (the AB file... and the required images, etc.) in order to try it here in AB. If you don't want to share here the link, just send me the files or the link to my E-Mail, Peter.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Sorry, I meant to add the ab file to the zip file but forgot. Here is a link: https://mymarina.online/iPort/decsoft.dockit.ab

DecSoft

Hello Peter,

The link of the AB file appear wrong... but anyway, what I need is the AB file and the required app's files, that is, the used images, scripts, etc. Just like try the app here in my PC like you in your computer!

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

My apologies, here is a link that works to the correct files: https://mymarina.online/iPort/decsoft/dockit.zip

DecSoft

Hello Peter,

Please, no apologies! But we have a problem here,... let me to try to explain. If you run the app, and, scroll up the console... you can see a couple of error messages caused in the "pouchdb.js" file ("fetch" are not defined) and the "pouchdb.find.js" file ("Headers" are not defined).

The above errors are fatal, at least one of them... anyway both of them must be solved. Why? Because certainly the app can continue running, however, at some moment (not only in the Notes view) we can see another error... "PouchDB" is not defined... and this last error is probably a consequence of the first ones...

How to solve the errors? Honestly I don't know right now... maybe because it's too late, but, in fact because the errors are caused in Javascript files that, in principle, must no contain any problem... at least just by included it in the HTML document like now...

Maybe you can search a bit from the error messages, around the PouchDB database, something like search in Google "fetch is not defined pouchdb.js"... I will try to continue help you tomorrow, Peter, but, certainly this what I can say right now...

Maybe you need to upgrade PouchDB and the used plugins?

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Thanks David, I will do some more research. It seems strange that these errors only show up when I add that last bit of code I think. Anyway, sorry to make you work so late. Talk to you later. Pete

DecSoft

Hello Peter,

Don't worry... maybe I am wrong... (definetively I must go to the bed and tomorrow I can take a look in a better way) but apparently the errors appear just when the "pouchdb.js" and the "pouchdb.find.js" files are added to the HTML document... that's rare... because in principle we don't start to use the stuff of that files... and the errors appear... but anyway, I want to take a look tomorrow morning: maybe I am missing something...

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, The fetch issue is due to a change in the latest pouchdb version (7.0). https://github.com/pouchdb/pouchdb/issues/7370 Apparently there is a fix but I'm not sure how to deploy the fix. I tried downgrading to version 6.4.3 and the error goes away. This version has the benefit of running in the AB preview window but for some reason although it runs in Firefox, it will not run in Chrome. However the report still does not populate although it does show in the console if I output the results there.

Apart from fixing the version 7 pouchdb error, it seems that right now it is just a case of the proper syntax to output the array. Could you take a look at this screencap and let me know how to output this data, it is for the original example with the results filtered for a particular title? https://mymarina.online/iPort/decsoft/screencap.png

Thanks, Pete

DecSoft

Hello Peter,

Since the screenshot shown a similar array than the first example... maybe you need to use the same code? Remember what is the main point: we must assign to the Report.Data variable the "docs" array... in fact, right now I am not sure why we iterate (at least in this last case), that is, maybe something like than the below is enough:

 window.App.RootScope.NotesGrid.Data = docs;

Remember: the Report's Data variable expect an array of objects, that is, the objects that the Report must be shown, as you know, every object in the array is a record in the Report.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, I am afraid that I am doing something centrally wrong and am getting frustrated. In order to simplify matters I have reverted to the original PouchDB project and have compiled the AB file and assets for you to look at. In the script editor you will see several saved functions:

remoteSync_All_Console - This returns all books into the console log properly
remoteSync_All_Report - This returns all books into the report properly
remoteSync_Find_Console - This returns just books with title = 'Book 1' into the console log properly
remoteSync_Find_Report - This is the one that I can't get to work
remoteSync - This is the one that is referenced by the view. It currently has the code from remoteSync_All_Console copied into it

I have also included in the zip file a few screen captures showing the console and report results. If you could give me a hand getting remoteSync_Find_Report working then I will be off and running as much of my app will just be other flavours of the same approach.

The assets can be downloaded Here. Cheers, Pete

DecSoft

Hello Peter,

Don't get frustrated... it's quite normal that the things requires more work that we expected at a first view... I am testing your zip / project, and, there is no errors right now! You told me that I must try the "remoteSync_Find_Report" function, but, finding it in the app they appear not used? So where you want to use that function?

On the other hand, but, not to get you more frustrated... may you can also consider other possible approach... maybe the local storage is enough for your "offline" requirements? Because if so, maybe you can deal directly with the local storage... and prepare some server's script to synchronize the data... I am imagine in another kind of database like MySQL, etc.

Again, this is not to desanimate you, but, maybe we are trying to kill flies with cannon fire? I don't know...

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, I was just storing the various scripts in the editor and copying and pasting them into the remoteSync to test them. With respect to whether or not PouchDB is the way to go, I am certainly not married to it and am a lot more familiar with MySQL. So let me ask you this. One of my main requirements is for certain users to be able to share an 'account' so that certain records would be kept in sync at all times assuming both users are online or it would sync when they come online. For example, if I had a shopping list, and user 1 added an item to that list, them that item would instantly pop up in the same shopping list for user 2. Would that type of live-time syncing be possible in the more traditional method that you are talking about? WebSockets perhaps? Pete

DecSoft

Hello Peter,

Just about the possible approach using another server's database, maybe more details are needed in order to decide if we can use "just" HTTP Clients (and HTTP calls) or if we need something more like a WebSocket server. This last allows to establish a bidirectional connection between the app and the server, and, allows to the app to receive information in real time, that is, by server demand.

So yes; certainly a WebSocket can do something like that... but I am not talking that there is something easy, maybe can be more easy than appear. On the other hand, a WebSocket server requires a dedicated hosting, and, I don't know if this can be suitable for you or not.

Said that, maybe we can avoid the usage of a WebSocket, just by consider various things, of course. We can start to know that the app's have an "Online" / "Offline" events, thant may we can use. So we can imagine that an user add an item to a shoping cart, and, if they are online, the app can made just an HTTP call to the server sending the cart' items, for example.

Once that is doing, any other app can "request" the cart' items to the server, of course. I feel that I place here just some few words, probably we must consider other things too, but, certainly probably it's possible to use the local storage in combination with a "traditional" server's database (any one, MySQL, PostgreSQL, Oracle or any other, since we made HTTP calls, and receive JSON (for example) the app is completely abstracted about the server's language nor database.

You can try to start with that approach, Peter, and, as now, we can try to help you in some specific problems. On the other hand, this do not mean that we end with PouchDB, that is, the problem right now is that I can see the app that you zipped without errors, so, I can't see what can / must be solved... if possible...

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello again,

Just to mention something... before the WebSockets availability, there a more or less "common approach" to establish a "pool" with the app's server, that is, you can ask to the server if some new cart's items are available... or just that send to the app the existing cart's items..., and, if needed, you can also do it in a "Timer", that is, in certain intervals of time. A WebSocket is more elegant, of course, however, they requires a dedicated hosting, and, not everyone have something like that available to use.

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello again!!

Thinking about what you wanted to do... apparently PouchDB can synchronize a database, but, my question is, they can do this in an "authomatic" way? If so, how they can do that? Using HTTP calls in a pool like I suggest above? This part is not clear to me... In other words, if you finally must to call to the synchronize method, why don't call in the same moment to your server, just to get the latest cart's items? Do you understand what I mean with this paragraph Peter? Please, post here if not... maybe I did not explain well!

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

If you can figure out how to display the find results in the record then I may stick with PouchDB. On the other hand, I have extensive experience in a product called AwareIM and have my own server. I can create a web app that handles a lot of the back-end functionality like user authorizations, mail deliveries etc... and can handle rest services so sending information back to the mobile app via json is a breeze so this might well be a viable option. My back-end database in this case would be MySql and so direct manipulation with that database or via my app are two possible options.

Most of my app functionality would not require instant synchronization and could likely be handled by http requests on entering a view etc... I do want to consider though, one to one user chat capability inside the app and I presume that this would need to use websockets? I really don't know anything about websockets. Would I need my own websocket server or are there 3rd party services available? This more traditional option does sound interesting as I would not likely be breaking new ground.

DecSoft

Hello Peter,

If you can figure out how to display the find results in the record then I may stick with PouchDB. [...]

Ok. I sent to you right now your sample a bit modified in order to get the "find" method working. I add a new view "Find" to the app, and a button from the first view that goto the new "Find" view. Once you goto that view, press the "Find" button. Take a look at that button's Click event for the code: I remove something that apparently is not needed.

But more important! The ".then" callback receives two arguments: the first one is "doc", and the second one is "error"... but you change the order of these arguments! For that reason you can't get it working... note also how we can assign the "doc.docs" array variable to the "Report.Data" variable, in other words, we no need to iterate the "doc.docs" array... except if need to do it for some reason.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David, A huge thank you for your persistence in helping me with this. It is working for me now. Now I have to sit back and think about whether I move forward with PouchDB or go with httpclient and a MySql db. Anyway, at least I have some choices now. Thanks again, your support is fantastic! Pete

DecSoft

Hello Peter,

No problem! Always thanks you for your support. I am happy to help when possible. :-)

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.