Question

I’m currently trying to extend the KnockoutJS shopping cart example to preload existing rows from a JSON collection.

Say, I have an object like this:

var existingRows = [{
        "Category":Classic Cars,
        "Product":2002 Chevy Corvette,
        "Quantity":1,
    }, {
        "Category":Ships,
        "Product":Pont Yacht,
        "Quantity":2,
}];

I am trying to modify the example so that on load it populates the grid with two rows, with the comboboxes pre-set to the items in the JSON object.

I can’t seem to get this object playing nicely with JSFiddle, but I’ve got as far as modifying the Cart and CartLine functions, and ApplyBindings call as follows:

var CartLine = function(category, product) {
    var self = this;
    self.category = ko.observable(category);
    self.product = ko.observable(product);
    // other code
}

var Cart = function(data) {
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) { return new CartLine(row.Category, row.Product);}))
    // other code
}

ko.applyBindings(new Cart(existingRows));

This correctly inserts two rows on load, but does not set the drop down lists. Any help would be much appreciated 🙂

Answer 1

The problem is that the values of the category and product observables in the CartLine object are not simple strings. They are actual objects, e.g. category refers to a specific category from the sample data that’s provided in that example, same with product.
But you’re just setting them to strings.

(Another problem is that your JS object existingRows is not valid javascript because of quotes missing around the string)

To get that example working with your existingRows object you could extract the relevant category and product from the sample data:

var Cart = function(data) {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) {
        var rowCategory = ko.utils.arrayFirst(sampleProductCategories, function(category) {
            return category.name == row.Category;
        });
        var rowProduct = ko.utils.arrayFirst(rowCategory.products, function(product) {
            return product.name == row.Product;
        });

        return new CartLine(rowCategory, rowProduct, row.Quantity);
    }));
    // other code
}

Updated fiddle: http://jsfiddle.net/antishok/adNuR/664/