How to get data from Web API service - Unable to load a drop down list with api response via knockout JS

Question

I am working on a Web API application which has a drop down list that should be populated with API response which is in xml using knockout JS. I was trying using the following

$.ajax({
        dataType: "json",
        url: '/api/UserProfiles',
         data: JSON.stringify(self.brokerNames),
        async: false,
        success: function (data) {
            self.brokerNames((ko.utils.arrayMap(data.value, function (broker) {
                var obsBrokers = {
                    UserId: broker.UserId,
                    UserName: broker.UserName
                }

                return obsBrokers;
            })));
        }
    });

I tried binding above response to a drop down as follows

<td>
  <select id="cbxBCP" data-bind="options: brokerNames, 
      optionsText: 'UserName', optionsValue: 'UserName', 
      value: selectedBidBroker, optionsCaption: 'Bid Broker'">
  </select>
</td>

But, the above returned an empty drop down. I'm not sure what the issue is but I saw the XML response when debugging with Postman.

The Web API is this

[HttpGet]
[Authorize(Roles="Admin")]
public IEnumerable<UserProfile> Get()
{
    return db.UserProfiles.OrderBy(c => c.UserName);
}

and seems to work fine.

May I know how I can fix this?

data is your returned XML, so data.value would be undefined. I don't see any attempt to parse the XML at all; this code appears to be written for a JSON response. — Paul Abbott
– Paul Abbott, Commented Nov 19, 2015 at 20:58
I'm pretty much new to consuming an api, may I know how I can do that — DoIt
– DoIt, Commented Nov 19, 2015 at 21:18
What's inside your web api action? What does it return? Have you debugged your js (you can press F12 in your browser to see the console)? Shouldn't you be using datainstead of data.value? You don't make clear what verb is usign your action, and if it's expecting parameters: why do you add data to your $.ajax()? read the dcs and see samples for $.get — JotaBe
– JotaBe, Commented Nov 20, 2015 at 10:41
@JotaBe My web api action returns all users in xml format and I did debug my js and I dont see any exceptions in the console and my action is a httpget and I still get xml response and I'm not sure how to parse it to json and pu it in dropdown.. edited my question — DoIt
– DoIt, Commented Nov 20, 2015 at 13:29

JotaBe · Accepted Answer · 2015-11-20 14:04:45Z

Web API returns XML format by default, or the format specified in the accepts header.

In your invocation of $.ajax you're not specifying a format, so you get XML. To get JSON you need to provide one of these two $.ajax options:

accepts, use accepts='application/json'
datatype, use dataType='json'

If you read the docs you'll see that the second option, besides, parses the received JSON, so that your data parameter is directly a JavaScript object.

NOTE: you don't need to register the JSON formatter in the Web API as it's available by default

NOTE 2: for correctly debugging Web API you need to use a tool like Postman chrome extension, which allows you to specify header (the accepts header explained above), and send and receive JSON data easyly, using any verb GET, POST, PUT, DELETE... If you simply type a URL in yout browser you only get the default format (XML), and you can only test GET actions, which is really unhelpful

Collectives™ on Stack Overflow

How to get data from Web API service - Unable to load a drop down list with api response via knockout JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related