Knockout JS Ajax call of jsonp not populating observable array

Question

After page loaded event, If change value in dropdown then it showing alert successfully and made jquery ajax call to return data from WebApi. But data is not binding to UL. below is the code.

<ul data-role="listview" data-divider-theme="b" data-inset="true" data-bind="foreach: Contacts" style="margin-top:-17px;">
 <li data-theme="c">
 <a href="#page1" data-transition="slide" data-bind="attr: { title: ContactID }">
 <span data-bind="text: FirstName + ' ' + LastName ')'"></span>
 </a>
 </li>
</ul>
function StrikeAppViewModel() {
    var self = this;

    self.Contacts = ko.observableArray();

        self.SearchContacts = function () {
        alert("Onchange event is fired");                  
        $.ajax({
            url: 'http://localhost:50043/api/Contacts',
            type: 'GET',
            dataType: 'jsonp',
            context: this,
            success: function (result) {
                debugger;
                self.Contacts($.parseJSON(result));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });         
    }
   };

I don't know why the data are not binding to ul.It doesn't show any error in webpage.

Please let me know where I made mistake.

Answer 1

Please re-write this line. Then it will work fine

  self.Contacts(result);