knockout js observableArray is not working

Question

Hi I'm trying to do a foreach using a observableArray and I'm getting no result.

Where as in javascript file while debugging the data is getting loaded with the array. The html code is given below:

<!-- ko foreach: currencyarr -->
    <option data-bind="value:id, text:label"></option>
<!-- /ko -->

And the JSON file content is as follows:

"name" : "shuvagho",
"curarr" : [
            {"id": "inr", "label": "INR"},
            {"id": "usd", "label": "USD"},
            {"id": "aud", "label": "AUD"},
            {"id": "sgd", "label": "SGD"}
]

And the javascript code using knockout js is as follows:

self.currencyarr = ko.observableArray();
self.currencyarr(data.curarr);

Guto · Accepted Answer · 2016-04-27 11:36:52Z

2

You forgot to use $data inside the foreach.

  var ViewModel = function(){
      var self = this;
      self.currencyarr = ko.observableArray();
      self.currencyarr(data.curarr);  
    }
    var data = {
    "name" : "shuvagho",
    "curarr" : [
                {"id": "inr", "label": "INR"},
                {"id": "usd", "label": "USD"},
                {"id": "aud", "label": "AUD"},
                {"id": "sgd", "label": "SGD"}
    ]};

    var viewModel = new ViewModel();

            ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select>
<!--ko foreach: currencyarr-->
  <option data-bind="text:$data.label, value:$data.id" ></option>
<!--/ko-->
</select>

You could also bind the options in the select tag.

var ViewModel = function(){
  var self = this;
  self.currencyarr = ko.observableArray();
  self.currencyarr(data.curarr);  
}
var data = {
"name" : "shuvagho",
"curarr" : [
            {"id": "inr", "label": "INR"},
            {"id": "usd", "label": "USD"},
            {"id": "aud", "label": "AUD"},
            {"id": "sgd", "label": "SGD"}
]};

var viewModel = new ViewModel();

        ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options:$root.currencyarr, optionsText: 'label',optionsValue:'id'"></select>

edited Apr 27, 2016 at 11:36

answered Apr 27, 2016 at 11:23

Guto

34116 silver badges28 bronze badges

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

1 Comment

Shuvajit Ghosh Over a year ago

I did all the above coding but still I couldn't able to. It is happening only for observablearray() alone. If I use observable() to display the text it is displaying perfectly.

Collectives™ on Stack Overflow

knockout js observableArray is not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related