Can't get returned Array inserted into knockoutjs observableArray

Question

I have the following view model. Upon logging in I want the user to have a select box listing all the cities in the database. Here's the view model

function ppfoViewModel(){
        var self= this;
        self.userName = ko.observable();
        self.password = ko.observable();
        self.loggedIn = ko.observable(false);
        self.validateUser = function(){
            if(self.userName()=='Admin'&&self.password()=='Admin'){ 
                var temp;
                self.loggedIn(true);
                $.get("dbhandler.php", { "fun": "cities"}, function (data) {self.cities(data);});               
            }else{
                self.loggedIn(false);
            }};
        self.cities = ko.observableArray()
        self.selectedCity = ko.observable();
        self.store = ko.observable();
        self.drink = ko.observable();
        self.test = ko.observable();
    };

The ajax request calls a page that returns the following string:

[{"cityName":"Provo","cityID":"1"},{"cityName":"Salt LakeCity","cityID":"2"}]

Here is the view.

<select data-bind="options: cities, optionsText:'cityName', selectedOptions: selectedCity""></select>

When I login I know I'm getting that string correctly however the select box has several blank spaces as it's options. I'm sure I'm missing something obvious here, but how can I get the array created by the php page and AJAX request into the observable array so it works? Thanks in advance for tolerating my ridiculousness.

Are you binding your viewmodel to your html?. On a side note, please do NOT validate and/or store user credentials in JavaScript! — thomaux
– thomaux, Commented Jul 11, 2012 at 8:26
Yes. I just didn't include the applyBindings line of code. Note that other bindings do work. The issue isn't with the bindings. It's with how the view model is interpreting the data returned in the AJAX request. — Frank B
– Frank B, Commented Jul 11, 2012 at 8:28
Have you tried logging the data when it is returned in the AJAX call? It is possible you need to parse it with JSON.parse(); — thomaux
– thomaux, Commented Jul 11, 2012 at 8:33
using json.parse did the trick. Make that an answer and I'll accept it for you. — Frank B
– Frank B, Commented Jul 11, 2012 at 8:41

thomaux · Accepted Answer · 2012-07-11 08:54:14Z

1

You need to parse the result back to a JSON object, like:

$.get("dbhandler.php", { "fun": "cities"}, function (data) {
    self.cities(JSON.parse(data));
});

answered Jul 11, 2012 at 8:54

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

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

2 Comments

Arbiter Over a year ago

Or better yet, just use $.getJSON which does both the HTTP GET and the parsing. api.jquery.com/jQuery.getJSON

Frank B Over a year ago

funny enough when I tried that I wasn't getting what I wanted. I'll try it again, but this works for now. Thanks!

Collectives™ on Stack Overflow

Can't get returned Array inserted into knockoutjs observableArray

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related