Question

I am trying to load in my JSON file and then make an insert for each item.

so I have this code

function ProductType(id, name) {
var self = this;

self.id = id;
self.name = name;
}


function ProductsViewModel() {
    var self = this;
    var jqxhr = $.getJSON("data/product.json").success(function(data, status, xhr) { 
          self.products = ko.observableArray([    
      $.each(data.data.productTypeList, function(i,item){
          new ProductType(i, item.longName);
    })
]);               
      })
     .error(function() { alert("error"); })
     .complete(function() {
        console.log("fetch complete + " + this);
     });

}

I wondered how best practice to insert into an observable array from an each function

at the current time I get this error

Error: 500 Error get /knockoutJQMProducts/#products Unable to parse bindings.
Message: ReferenceError: products is not defined;
Bindings value: foreach: products

but if i console.log(i) within the each statement it returns the results.

Thanks

Answer 1

ryadavilli’s answer is good, but could be improved by caching the array and then setting the observableArray all at once.

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();
    var jqxhr = $.getJSON("data/product.json").success(function(data, status, xhr) {
        var products = [];
        $.each(data.data.productTypeList, function(i, item) {
            products.push(new ProductType(i, item.longName));
        });
        self.products(products);
    })
        .error(function() {
            alert("error");
        })
        .complete(function() {
            console.log("fetch complete + " + this);
        });
}