good way to insert into observable array in knockout using jQuery

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

Mike B · Accepted Answer · 2012-11-21 17:54:12Z

3

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);
        });
}

answered Nov 21, 2012 at 17:54

Mike B

2,7063 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravi Y Over a year ago

Good point. This does reduce the number of notifications that knockout sends on array change.

Ravi Y · Accepted Answer · 2012-11-20 06:43:58Z

2

I have modified your VM and the success method so that the observable array is populated on success. But it exists all the time.

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();    
    var jqxhr = $.getJSON("data/product.json").success(function(data, status, xhr) { 
      // use this remove all only if you want to clear and load with new data.
       self.products.removeAll();
       $.each(data.data.productTypeList, function(i,item){
          self.products.push(new ProductType(i, item.longName));
     })
  })
 .error(function() { alert("error"); })
 .complete(function() {
    console.log("fetch complete + " + this);
 });
}

answered Nov 20, 2012 at 6:43

Ravi Y

4,3662 gold badges31 silver badges39 bronze badges

10 Comments

Dan Over a year ago

Thanks for the answer.. one wierd thing that happens now is that my jQuery Mobile styling doesnt happen for those items where as it did when I just used self.products = ko.observableArray([ new ProductType('1','dan'), new ProductType('2','s') ]); any ideas why?

Ravi Y Over a year ago

Can you please share your HTML binding code as well ? Also, please check the objects that are getting created within the success call? Is it possible that you or I have missed some property. Also, I see that your object (each ProductType) within the array has all properties as string. Is this the same case with your ajax data? If not you might want to change your bindings or the properties in the ProductType return value to reflect this.

Dan Over a year ago

here is the url demo.stg.brightonconsulting.net.au/templates/tests/… note that when you first go through this its ok, but if you refresh the products page it loses stying.. also if I try on my mobile the second page data doesnt even appear!

Ravi Y Over a year ago

@Dan, you seemed to missed posting the URL. Can you also check for the other items i mentioned in my comment above and let me know?

Dan Over a year ago

I see the data always. just depends if i reload or navigate to the page if you want to see the code i have added it to this ticket stackoverflow.com/questions/13469143/…

|

Collectives™ on Stack Overflow

good way to insert into observable array in knockout using jQuery

2 Answers 2

1 Comment

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related