CODEWITHSUNDEEP
javascripthtmlknockout.js
OmarMokhtar
OmarMokhtar

Reputation: 43

Item in observable array is not added to the list KO

I take some data from a loaded list and add them to observable array and i suppose to show them in another list , everything goes will except the data is not shown on the screen here's the code 

 self.addData = function (val) {
        
        self.finalList().push(val);

        alert(val.LATIN_DESC);

    }
   <div class="container">
                            <h2> Added servcies</h2>
                            <div class="row" style="height:20vh; overflow:auto;">
                                <div class="col-md-3">
                                    <ul data-bind="foreach:finalList">
                                        <li class="list-group-item">
                                            <div class="col-xs-3">
                                                <b data-bind="text:LATIN_DESC , value: SYS_KEY"></b>
                                            </div>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                         
                        </div>

Upvotes: 0

Views: 40

Answers (2)

Mosd
Mosd

Reputation: 1682

Exactly what @connexo about the observableArray, and also when binding b element, it will make sense to use text and not value, since b element wont set change the value. 

 
 function TestVM (){
   var self = this;
   self.finalList = ko.observableArray();
    self.addData = function (val) {
        
        self.finalList.push(val);

        alert(val.LATIN_DESC);

    }
    
    self.addData({LATIN_DESC: 'RR', SYS_KEY: 'GG'});
 }
 
 ko.applyBindings(new TestVM())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="container">
                            <h2> Added servcies</h2>
                            <div class="row" style="height:20vh; overflow:auto;">
                                <div class="col-md-3">
                                    <ul data-bind="foreach:finalList">
                                        <li class="list-group-item">
                                            <div class="col-xs-3">
                                                <b data-bind="text:LATIN_DESC +'-'+ SYS_KEY"></b>
                                            </div>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                         
                        </div>

Upvotes: 1

connexo
connexo

Reputation: 56783

self.finalList() returns whatever the observable array currently holds, and then self.finalList().push(val) pushes a value to the returned result (using Javascript's native Array.Prototype.push() method), not the observable array itself. Use Knockout observable array's push method instead:

self.finalList.push(val).

Upvotes: 1

Related Questions