Setting select list value in Knockout.JS

Question

I'm trying to populate a table of inputs (textboxes and select list) with JSON data retrieved from a jQuery GET request. For the example I pre-set a variable with some data rather than making a get request. The textbox inputs are correctly populating with data, but the select lists will not populate.

Here is an example of the data that knockout receives and places in the table

var returnedData = [{
    "taskID": "1",
    "taskName": "test task",
    "taskDetails": "details",
    "employee": {
        "employeeID": "1",
        "employeeName": "John"
    }
}, {
    "taskID": "2",
    "taskName": "another test",
    "taskDetails": "some more details",
    "employee": {
        "employeeID": "2",
        "employeeName": "Jane"
    }
}];

On the official knockout tutorials, they use a textarea (I included it in the fiddle) to show how the data is formatted as it is being posted back to the server. The pre-loaded data is in the exact same format.

Anyway, here is a fiddle with the code.

Is there a reason why none of your properties are observables? — xdumaine
– xdumaine, Commented Jan 30, 2014 at 1:31
@xdumaine I based it off the knockout.js tutorial for loading and saving data. I'm assuming you're going to say make them observables? — user1104854
– user1104854, Commented Jan 30, 2014 at 1:33
Well, looking at your code a bit more, I guess it's not critical, but as you add complexity, you'll probably want to have them be observables. — xdumaine
– xdumaine, Commented Jan 30, 2014 at 1:34

xdumaine · Accepted Answer · 2014-01-30 01:46:12Z

The reason that the select lists won't populate is object equality. They're bound to availableEmployees observable array with the options binding and the value binding is to Employee, but when you're setting the employee property of each task, you're setting it to a new object with the same properties and values, which is not equal in javascript. What I'd do is actually search (my example has a terrible for loop search, just to show you what I mean) for the matching employee in your list of available employees, and set the employee to that actual object, not the object coming in from the task's info. Check this out:

var returnedData = [{         
    "taskID": "2",
    "taskName": "test task",
    "taskDetails": "details",
    "employee": self.availableEmployees()[1]
}, {
    "taskID": "5",
    "taskName": "another test",
    "taskDetails": "some more details",
    "employee": self.availableEmployees()[2]
}];

This is because in javascript:

var a = { foo: 1, bar: 'baz'};
var b = { foo: 1, bar: 'baz'};
console.log(a == b); // false

JSFiddle

Collectives™ on Stack Overflow

Setting select list value in Knockout.JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related