locked
Web API & Knockout select list to observable array problem RRS feed

  • Question

  • User-1771888428 posted

    I use knockout to fill a select list with Shipping Methods I have this method that returns two items from web api:

    [HttpGet]
           public Models.ShippingMethodsModel GetShippingMethods()
           {
              try
              {
                 DataAccess.ShippingMethod[] shippingMethods = Business.Site.ShopTables.GetShippingMethods().ToArray();
                 Models.ShippingMethodsModel model = new Models.ShippingMethodsModel { ShippingMethods = shippingMethods };
                 return model;
              }
              catch (Exception ex)
              {
                 return null;
              }
           }

    and the client side model:

    var shippingMethodModel = {
        ShippingMethods: ko.observableArray([]),
        SelectedShippingMethod: ko.observable(0)
    }

    and the method that receives items in client as:

    var getShippingMethods = function (success) {
        sendRequest(homeUrl + "GetShippingMethods", "GET", null, function (data) {
            shippingMethodModel.ShippingMethods.removeAll();
            shippingMethodModel.ShippingMethods.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);
    
            success();
        });
    }

    finally this is the select list:

    <select size="5" data-bind="options: shippingMethodModel.ShippingMethods(), value: shippingMethodModel.SelectedShippingMethod, optionsText: function(item) { return item.Title + ' ( ' + item.Price.toFixed(0) + ' )'}, optionsValue: 'Id'"></select>


    But only one item shows (the first item), and I can verify that the web api method exit has two items. Why the other items are not showing?

    Saturday, November 29, 2014 12:21 PM

Answers

  • User-1771888428 posted

    I find the problem, in this line of client code:

    shippingMethodModel.ShippingMethods.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);

    push is ommited the correct line is:

    shippingMethodModel.ShippingMethods.push.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 29, 2014 3:16 PM

All replies

  • User-1771888428 posted

    I find the problem, in this line of client code:

    shippingMethodModel.ShippingMethods.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);

    push is ommited the correct line is:

    shippingMethodModel.ShippingMethods.push.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 29, 2014 3:16 PM
  • User-1926401737 posted

    I find the problem, in this line of client code:

    shippingMethodModel.ShippingMethods.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);

    push is ommited the correct line is:

    shippingMethodModel.ShippingMethods.push.apply(shippingMethodModel.ShippingMethods, data.ShippingMethods);

    good job.

    Best Regards,

    Sw-ing

    Sunday, November 30, 2014 9:19 PM