Apache Cordova.- How to pass the result of a query as JSON in MVVM?

[Pit]

I want to pass the result of a query as json to a <select>, but it gives me error.

Use:
- Kendo Mobile
- Azure Mobile Service
- MVVM

Error: Uncaught Error: TypeError: undefined is not a function MobileServices.Web-1.1.0.min.js:2

Do not understand why the Azure Mobile Service responds when action must be Kendo.

file: denunciar.js

01.(function (global) {
02.    var DenunciarViewModel
03.        , app = global.app = global.app || {};
04.
05.    DenunciarViewModel = kendo.data.ObservableObject.extend({
06.        tipoDenuncias: []
07.    });
08.
09.    app.denunciarService = {
10.
11.        initDetalleDenuncia: function () {
12.            var query = app.tipoDenunciaTable; // Referencing to the table and service.
13.
14.            // Consult the service
15.            query.read().done(function(tiposDenuncias){
16.                var tipoDenuncias = JSON.stringify(tiposDenuncias);
17.                // alert (tipoDenuncias);
18.                /* Result Alert
19.                [{"id":"02B88A8A-EF9B-4E85-B1F3-B0FD40F65A31","vdescripcion":"Ruptura del pavimento","vresponsable":"Municipio de Guayaquil"},{"id":"584E4F7B-E358-408B-B6E2-66AEEA927B42","vdescripcion":"Huecos en las calles","vresponsable":"Municipio de Guayaquil"},{"id":"82FE25B1-79F7-402C-9C92-9862F4036BCA","vdescripcion":"Falta de Señalética en las calles","vresponsable":"Municipio de Guayaquil"}]
20.                */
21.                DenunciarViewModel.set("tipoDenuncias", tipoDenuncias);
22.            });
23.
24.        }
25.
26.        , viewModel: new DenunciarViewModel()
27.    };
28.})(window);

file: view_denunciar.html

01.<div id="view_denunciar"
02.data-role="view"
03.data-title="Reportar Incidente"
04.data-layout="main"
05.data-model="app.denunciarService.viewModel"
06.data-init="app.denunciarService.initDetalleDenuncia">
07.<form>
08.    <ul data-role="listview" data-style="inset">
09.        <li>
10.            <label>
11.                <div>Tipo De Denuncia:</div>
12.                <select data-bind="source: tipoDenuncias" data-text-field="vdescripcion" data-value-field="vdescripcion"></select>
13.            </label>
14.        </li>
15.    </ul>
16.</form>

[Zdravko]

Hi Peter,

Thank you for contacting us.

I would suggest using our debug on device feature in order to investigate the error on your side and find out what happens in this file:
Error: Uncaught Error: TypeError: undefined is not a function MobileServices.Web-1.1.0.min.js:2

As for your code, I had to make a change (code in red) in order to populate the data that I assume you get from the service properly (I used the commented one).

(function (global) {
    var DenunciarViewModel,
    app = global.app = global.app || {};

    DenunciarViewModel = kendo.data.ObservableObject.extend({
        tipoDenuncias: []
    });

    app.denunciarService = {

        initDetalleDenuncia: function () {
            var tipoDenuncias = [{"id":"02B88A8A-EF9B-4E85-B1F3-B0FD40F65A31","vdescripcion":"Ruptura del pavimento","vresponsable":"Municipio de Guayaquil"},
            {"id":"584E4F7B-E358-408B-B6E2-66AEEA927B42","vdescripcion":"Huecos en las calles","vresponsable":"Municipio de Guayaquil"},
            {"id":"82FE25B1-79F7-402C-9C92-9862F4036BCA","vdescripcion":"Falta de Señalética en las calles","vresponsable":"Municipio de Guayaquil"}];

            app.denunciarService.viewModel.set("tipoDenuncias", tipoDenuncias);
        },
        viewModel: new DenunciarViewModel()
    };
})(window);

Another thing you can use for your data is Kendo DataSource.

If you require additional assistance please consider sending you project or a sample one in a private ticket.

Regards,
Zdravko
Telerik

 

 

[Pit]

Thank you very much Zdravko, that red line was the correction that was applied in my project.

Thanks for the tip to debug, I had not considered; I was with console prints and alerts, for more detail or to debug the simulator.

I did not know about support tickets, now I will use.

Thank you very much.