Knockout : Bind foreach data in html on ajax response

Question

I see many example of knockout foreach. But, it's not exact as I want. I'm new in knockout.

I want to do like that on ajax response data push in ko.observableArray() and display foreach data in html content.

But, I got error message Uncaught ReferenceError: Unable to process binding "src: $data.productName"

I post here my html code and js code.

Please help me.

HTML :

<input type="text" id="description" class="form-control" maxlength="255" data-bind="event:{keyup: doSomething},value: changeTextValue,valueUpdate:'afterkeyup'"></input>
<div class="autocomplete-suggestions" data-bind="foreach: autocompleteData">
    <div class="autocomplete-suggestion" data-index="text: $index">
        <div href="#">
            <div class="suggestion-left">
                <img class="img-responsive" data-bind="attr: {src:$data.productName}" alt="">
            </div>
            <div class="suggestion-right">
                <div class="product-line product-name">
                    <a data-bind="attr: {href:$data.productUrl}" target="_blank"><span data-bind="text:$data.productName}"></span></a>
                </div>
                <div class="product-line product-price">Price: <span data-bind="value:$data.productPrice}"></span></div>
                <div class="product-des">
                    <p class="short-des" data-bind="attr : {id:$data.productSku}">Sku: <span data-bind="text:$data.productSku}"></span></p>
                </div>
                <div class="tranferdata">
                    <button id="search-item-list">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery :

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 >= 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());

Answer 1

Have you tried without $data?

<div class="autocomplete-suggestions" data-bind="foreach: autocompleteData">
    <div class="autocomplete-suggestion" data-index="text: $index">
        <div href="#">
            <div class="suggestion-left">
                <img class="img-responsive" data-bind="attr: {src:productName}" alt="">
            </div>
            <div class="suggestion-right">
                <div class="product-line product-name">
                    <a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName}"></span></a>
                </div>
                <div class="product-line product-price">Price: <span data-bind="value:productPrice}"></span></div>
                <div class="product-des">
                    <p class="short-des" data-bind="attr : {id:productSku}">Sku: <span data-bind="text:productSku}"></span></p>
                </div>
                <div class="tranferdata">
                    <button id="search-item-list">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>

If this doesn't work then your observableArray might not be holding the correct data/format. In that case please console.log the array after the ajax call and add to your question.