{"id":2791,"date":"2022-08-30T15:27:48","date_gmt":"2022-08-30T15:27:48","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/02\/16\/knockoutjs-update-observablearray-via-ajax-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:27:48","modified_gmt":"2022-08-30T15:27:48","slug":"knockoutjs-update-observablearray-via-ajax-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/knockoutjs-update-observablearray-via-ajax-collection-of-common-programming-errors\/","title":{"rendered":"KnockoutJS Update observableArray via AJAX-Collection of common programming errors"},"content":{"rendered":"<p>Been playing with KnockoutJS. Now, I am struggling to get my head around MVMM or whatever as I am not a programmer. However, I like the sounds of Knockout and I like the demos. So I have tried to create an observableArray (which, using jQuery templating lists the info on the page), and what I&#8217;d like to do is on button click (though ideally on page load) is run an ajax call and update the array.<\/p>\n<p>Here is what I have but it isn&#8217;t working, it says &#8220;this.propertyDetails is undefined&#8221;<\/p>\n<p>HTML:<\/p>\n<pre><code>Add property\n<\/code><\/pre>\n<p>JS:<\/p>\n<pre><code>var viewModel = {\npropertyDetails: ko.observableArray([   \n    {name: \"1\", type: \"Unknown\"},\n    {name: \"2\", type: \"Unknown\"},\n    {name: \"3\", type: \"Unknown\"},\n    {name: \"4\", type: \"Unknown\"}\n]),\n\naddProperty: function() {\n    \/\/this.propertyDetails.push({name: \"New Thing\", type: \"Unknown\"});\n\n    $.ajax({\n        dataType: 'json',\n        data: 'count=10',\n        url: 'http:\/\/feeds.delicious.com\/v2\/json\/tomleadbetter?callback=?',\n        success: function (data) {\n            $.each(data, function(i,item){\n                console.log(item);\n                this.propertyDetails.push({name: item.d , type: item.u});\n            });\n        }\n    }); \n}\n\n};\n\nko.applyBindings(viewModel);\n<\/code><\/pre>\n<p>It runs the ajax call on button click, but fails when trying to push each item into the array.<\/p>\n<p>Don&#8217;t get me wrong, I may have got this completely incorrect! But this line work on button press to insert into the array<\/p>\n<p>this.propertyDetails.push({name: &#8220;New Thing&#8221;, type: &#8220;Unknown&#8221;});<\/p>\n<p>So any pointers would be great. Thanks<\/p>\n<ol>\n<li>\n<p>You should work on your problem description. Fails completely isn&#8217;t very specific. Does it throw an error or does it run without error, but do nothing?<\/p>\n<p>My first guess is that <code>this.propertyDetails<\/code> doesn&#8217;t resolve because <code>this<\/code> isn&#8217;t what you think it is. You could try doing a <code>console.log(this.propertyDetails)<\/code> and see what happens. If it&#8217;s undefined then the <code>this<\/code> reference is the problem and you can fix it by adding <code>.bind(viewModel)<\/code> to your handler function.<\/p>\n<p>e.g.<\/p>\n<pre><code>addProperty: function() {\n    \/\/this.propertyDetails.push({name: \"New Thing\", type: \"Unknown\"});\n\n    $.ajax({\n        dataType: 'json',\n        data: 'count=10',\n        url: 'http:\/\/feeds.delicious.com\/v2\/json\/tomleadbetter?callback=?',\n        success: function (data) {\n            $.each(data, function(i,item){\n                console.log(item);\n                this.propertyDetails.push({name: item.d , type: item.u});\n            }.bind(viewModel);\n        }\n    }); \n}\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2014-02-16 14:31:56. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>Been playing with KnockoutJS. Now, I am struggling to get my head around MVMM or whatever as I am not a programmer. However, I like the sounds of Knockout and I like the demos. So I have tried to create an observableArray (which, using jQuery templating lists the info on the page), and what I&#8217;d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2791","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2791"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2791\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}