locked
How to fetch data from web service in windows store apps using JavaScript

    Question

  • HI All,

    I been developing an Windows Store App in JavaScript. The problem mainly i'm facing is how to fetch the records to controls i have tried like below

    <select id="CbxArea" style="width: 200px">
    
        <option>Select Area</option>
    
    </select>
    
    <script type="text/javascript">
    
            $(document).ready(function () {
    
                var ddlArea = $("#CbxArea");
    
                $.ajax({
    
                    type: "GET",
    
                    contentType: "application/json; charset=utf-8",
    
                    url: "WebService URL",
    
                    dataType: "json",
    
                    success: function (data) {
    
                        for (i = 0; i < data.d.length; i++) {
    
                            ddlArea.append($("<option></option>").val(data.d[i].AreaName).html(data.d[i].AreaName));
    
                        };
    
                    }
    
                });
    
            });
    
        </script>


    Later i have seen some of the site saying that we can't use ajax calls in the windows store app. Is there any way to fetch data from webservice, if so please provide any sample code.

     

    Thanks,

    D Haraveer

     

     

    Tuesday, June 11, 2013 8:49 AM

All replies

  • Hi,

    You can use ajax calls but it's recommended you use WinJS.xhr (you don't need jQuery really).

    //in your Page Control html file
    <select id="CbxArea" style="width: 200px">
    
        <option>Select Area</option>
    
    </select>
    
    //in your Page Control's js file, which would be the advised way to separate html from js
    
    ready: function (element, options) {
    //some code you may already have
     WinJS.xhr({url: "webservice_url" }).done(function (datas) {
    var data = JSON.parse(datas.responseText);
    var innerhtml='';
    for (i = 0; i < data.length; i++) {
    innerhtml+='<option>'+data[i].AreaName+'</option>';
    }
    element.querySelector('#CbxArea').innerHTML = innerhtml;
    }, function(error){
    //handle connection errors
    });
    //rest of the initialization code of the Page Control's js file
    },
    //rest of your page's js file

    Tuesday, June 11, 2013 12:29 PM
  • Hi Ealsur,

    Is this code same(modifications) for the binding data to grid?

    Thanks,

    D Haraveer

    Wednesday, June 12, 2013 7:11 AM
  • Hi,

    You mean to bind data to a ListView control?

    You would need to define a Template in your HTML and modify slightly your JS, but you obtain the records from the URL the same way (using WinJS.xhr).

    //in your Page Control html file
    <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
    <h4 data-win-bind="innerText: AreaName"></h4>
    </div>
    </div>   
    
    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
            data-win-options="{itemTemplate: select('#itemTemplate')}">
        </div> 

    //in your Page Control's js file, which would be the advised way to separate html from js
    
    ready: function (element, options) {
    //some code you may already have
     WinJS.xhr({url: "webservice_url" }).done(function (datas) {
    var dataArray= JSON.parse(datas.responseText);
    var dataList = new WinJS.Binding.List(dataArray);
    var listview = element.querySelector("#basicListView").winControl;
    listview.itemDataSource = dataList.dataSource;
    
    }, function(error){
    //handle connection errors
    });
    //rest of the initialization code of the Page Control's js file
    },
    //rest of your page's js file
    Of course, it all depends on what you want to show and how, this is a basic example, on the ListView link you can have a bigger reference of use.


    • Edited by Ealsur Wednesday, June 12, 2013 12:09 PM
    Wednesday, June 12, 2013 12:08 PM
  • Hi Ealsur,

    Thanks for the supports,I'm little bit confused where to write this code.So please can you send me any sample project.

    Thanks,

    D Haraveer.

    Thursday, June 13, 2013 4:54 AM
  • Here is an official MSDN sample for consuming a Webservice that returns JSON through WinJS.xhr, it does not include the ListView binding code but shows an example of where to put the code.

    Basically, if you created a WinJS project in Visual Studio, you picked up a template and created an App that at some point, needs to read that Webservice, could be a button click or the load of a certain page or section of your App, if you picked the Navigation Template, it builds upon the pattern of creating Page Controls, if you picked another template or a blank App, your js code exists in (by default) a default.js file.

    How to consume JSON Web Service Using WinJS.xhr

    RSS Reader in a Windows 8 App

    Complete list of official MSDN WinJS.xhr samples

    Thursday, June 13, 2013 11:50 AM