title: Knockout : Bind foreach data in html on ajax response
body: <p>I see many example of knockout foreach. But, it's not exact as I want. I'm new in knockout.</p>
  
  <p>I want to do like that on ajax response data push in <strong>ko.observableArray()</strong> and display foreach data in html content.</p>
  
  <p>But, I got error message <strong>Uncaught ReferenceError: Unable to process binding "src: $data.productName"</strong></p>
  
  <p>I post here my html code and js code.</p>
  
  <p>Please help me.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;input type="text" id="description" class="form-control" maxlength="255" data-bind="event:{keyup: doSomething},value: changeTextValue,valueUpdate:'afterkeyup'"&gt;&lt;/input&gt;
  &lt;div class="autocomplete-suggestions" data-bind="foreach: autocompleteData"&gt;
      &lt;div class="autocomplete-suggestion" data-index="text: $index"&gt;
          &lt;div href="#"&gt;
              &lt;div class="suggestion-left"&gt;
                  &lt;img class="img-responsive" data-bind="attr: {src:$data.productName}" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="suggestion-right"&gt;
                  &lt;div class="product-line product-name"&gt;
                      &lt;a data-bind="attr: {href:$data.productUrl}" target="_blank"&gt;&lt;span data-bind="text:$data.productName}"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="product-line product-price"&gt;Price: &lt;span data-bind="value:$data.productPrice}"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="product-des"&gt;
                      &lt;p class="short-des" data-bind="attr : {id:$data.productSku}"&gt;Sku: &lt;span data-bind="text:$data.productSku}"&gt;&lt;/span&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="tranferdata"&gt;
                      &lt;button id="search-item-list"&gt;Add Item&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery :</p>
  
  <pre><code>return Component.extend({
          defaults:{
              changeTextValue: ko.observable(),
              anotherObservableArray : [],
              subscription : null,
              tracks: {
                      changeTextValue: true
                }
          },
          CourseViewModel : function(){
              var self = this;
              self.productName = ko.observable();
              self.productSku = ko.observable();
              self.imageUrl = ko.observable();
              self.productPrice = ko.observable();
              self.productUrl = ko.observable();
          },
          CeremonyViewModel : function () {
              var self = this;
              self.autocompleteData = ko.observableArray([new CourseViewModel()]);
              self.autocompleteData.push(new CourseViewModel());
          },
          initialize: function () {
              this._super();
          },
          doSomething : function(config){
              var self = this;
              if (this.subscription)
                  this.subscription.dispose();
  
              this.subscription = this.changeTextValue.subscribe(function(newValue){
                  if(newValue.length &gt;= config.configValue){
                      fullScreenLoader.startLoader();
                      storage.post(
                          'abc/temp/temp',
                          JSON.stringify({'searchtext' : newValue}),
                          true
                      ).done(
                          function (response) {
                              /** Do your code here */
                              self.autocompleteData.push({productName:response.productName,imageUrl:response.imageUrl,productSku:response.productSku,productPrice:response.productPrice,productUrl:response.productUrl});
                              fullScreenLoader.stopLoader();
                          }
                      ).fail(
                          function (response) {
                              // fullScreenLoader.stopLoader();
                          }
                      );
                  }
              });
          },
  });
  ko.applyBindings(new CeremonyViewModel());
  </code></pre>