Over a million developers have joined DZone.

Bind JSON REST Result Using Knockout

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Last couple of hours I was trying to bind json data from a WCF service to a simple HTML UI using Knockout js. This is a very simple application I created to learn Knockout. This application is also a tracer to test  whether I can bind json result from the service directly to the UI, without creating an elaborate javascript view model at the client side. In real world services returns complex json, so it’s not possible to create the same model at the client side.


Knockout provides mapping as a plugin, you can see more details here. Please  go through the link before you proceed.

So let’s see how I created my view model and the html UI.

I created a js file named customerviewmodel.js and added the  below code.

function customerViewModel() {
    var self = this;

    self.customerList = ko.observableArray();

    self.getCustomers = function () {
            type: 'GET',   
            url: '',
            contentType: "application/javascript",
            dataType: "jsonp",
            success: function(data) {
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
            error:function(jq, st, error){

$(document).ready(function () {
    ko.applyBindings(new customerViewModel());

And the html UI. For this tracer app, I created a MVC4 web application and removed all the html code from the Views/Home/index.cshtml and replaced it with the below code.

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.debug.js"></script>
<script src="~/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="~/MyScripts/customerviewmodel.js"></script>

    <tbody data-bind="foreach: customerList">
            <td data-bind="text: Id"></td>
            <td data-bind="text: Name"></td>

<input type="button" id="btnGetCustomers" value="Get Customers" data-bind="click: getCustomers">

customerList is a ko.observablearray and the data will get filled when the user clicks the button. I was able to call the WCF  REST api and get the json but unable to populate customerList or show the data to the  UI.  I fixed the issue with the  help of a post from Stackoverflow, see the code snippet below.

success: function(data) {
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();

WCF Configuration changes

As you can see, my WCF REST service is running in a different machine, and when I do an ajax call with datatype:json I am getting some errors. After some googling I came to know that I have to call the service with datatype:jsonp. So I changed it to jsonp and started getting the below error.

jQuery18206380491638767738_1396378264364 was not called

So I modified the  WCF service configuration as shown below to work with jsonp request.

          <binding name="webHttpBindingJson" crossDomainScriptAccessEnabled="true" />

        <behavior name="ServicesBehavior">
           <serviceMetadata httpGetEnabled="true"/>
        <behavior name="webby">
          <webHttp helpEnabled="true" />

I configured the service as shown below. I use a custom hosting, so need to provide baseaddresses.

      <service name="WCFRestTest.Services.CustomerService" behaviorConfiguration="ServicesBehavior">
            <add baseAddress=""/>
        <endpoint name="customerServiceRest" address="" 

               bindingConfiguration="webHttpBindingJson" binding="webHttpBinding" 

               contract="WCFRestTest.Services.ICustomerService" behaviorConfiguration="webby"/>

After this WCF configuration changes I could able to get json from the REST  api and bind the result to html UI using Knockout.

Let me know if you have any questions.

Happy coding…

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

dotnet,frameworks,javascript,visual studio,data access,.net & windows,knockout.js

Published at DZone with permission of Sony Arouje, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}