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

3 posts, 1 answers
  1. Pit
    Pit avatar
    7 posts
    Member since:
    Feb 2013

    Posted 17 Mar 2015 Link to this post

    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>

  2. Answer
    Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 20 Mar 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Pit
    Pit avatar
    7 posts
    Member since:
    Feb 2013

    Posted 21 Mar 2015 Link to this post

    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.
Back to Top