unable to assign Json string of array

Question

The GetAllCountries retrieve list of countries from controller action(MVC).I am unable to assign the countries to select element( as shown in the mark up). On the other hand if I assign values as model.countries = ["India","USA"]; it worked. How do I assign the return values?

var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));


    function StudentViewModel() {
        var self = this;
        self.students = ko.observableArray([]);
        self.countries =[];
        self.editingItem = ko.observable();
        self.isItemEditing = function(itemToTest) {
            return itemToTest == self.editingItem();
        };
    };
    $(document).ready(function () {
        var url = '/GridDemo/GetAllCountries';
        $.ajax({ url: url, success: dataRetrieved, type: 'POST', dataType: 'json' });
        var model = new StudentViewModel();
        //model.countries = ["India","USA"];
        function dataRetrieved(data) {
            var strCountry = [];
            for (var i = 0; i<data.length; i++) {
                strCountry.push(data[i]);
            }
            //alert(strCountry);
           model.countries = strCountry;

        }
       // alert(initialData.country);
        //model.countries = initialData.Countries;
        model.students(initialData);
        ko.applyBindings(model);   

    });

HTML :

 <select class="form-control" data-bind="options: $root.countries, value: 
  Country, visible: $root.isItemEditing($data)"></select>
 <label data-bind="text: Country, visible: !$root.isItemEditing($data)" />

When I pop up the json result I got exactly: India,America,Nepal.

Action in the controller:

 public JsonResult GetAllCountries()
        {
            var countries = new[] { "India", "America", "Nepal" };
            return Json(countries, JsonRequestBehavior.AllowGet);
        }

what does the url url = '/GridDemo/GetAllCountries'; return. I cant see the code. Make Sure it return valid json — Miller
– Miller, Commented Feb 1, 2014 at 9:34
But Anyway i was able to parse the result and push into array. Still the assignment of the array doesn't work (please see above) — arjun
– arjun, Commented Feb 1, 2014 at 10:03

Ali Habibzadeh · Accepted Answer · 2014-02-01 12:15:38Z

1

You need to make your countries also an ko.observableArray

function StudentViewModel() {
        var self = this;
        self.students = ko.observableArray();
        self.countries = ko.observableArray();
        self.editingItem = ko.observable();
        self.isItemEditing = function(itemToTest) {
            return itemToTest == self.editingItem();
        };
    };

And in your dataRetrieved you need to assign the strCountry to the model.countries:

function dataRetrieved(data) {
    var strCountry = [];
    for (var i = 0; i<data.length; i++) {
        strCountry.push(data[i]);
    }
    model.countries(strCountry);
}

Or you can directly push into your observable array (documentation):

function dataRetrieved(data) {
    model.countries.removeAll();
    for (var i = 0; i<data.length; i++) {
        model.countries.push(data[i]);
    }
}

edited Feb 1, 2014 at 12:15

Ali Habibzadeh

11.6k4 gold badges57 silver badges80 bronze badges

answered Feb 1, 2014 at 9:38

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

5 Comments

arjun Over a year ago

I tried both but it didn't work. I got error: removeAll is not a function

nemesv Over a year ago

@arjun then please a sample response data what you get in the dataRetrieved function!

nemesv Over a year ago

You should also check your browser's javascript console looking for errors!

arjun Over a year ago

Could you please see the changes above

nemesv Over a year ago

Please check again your console for errors. If you correctly receives an array in dataRetrived then pusgin into an observable array should work. See in this example: jsfiddle.net/AUmqy

Collectives™ on Stack Overflow

unable to assign Json string of array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related