How to use IEnumerable in knockout.js?

Question

Problem Description

I wanted to ask about how to use a list Exbando Objects in knockout.js,am using Rob Conrey's Massive and all returned results are dynamic, that's fine with me it suits my needs but when it comes to sending results to knockout i just don't know what to do with it.

Goal

Access object properties like obj.Name, obj.Brand etc...

Sample Code

View:

<div data-bind="foreach: Products">
    <p>Product name: <strong data-bind="text: Name"></strong></p>
</div>

Controller:

public JsonResult GetProducts() 
{
     Products products = new Products();
     var Model = products.GetAllProducts();
     return Json(Model, JsonRequestBehavior.AllowGet);
}

The result of calling GetProducts is:

[[{"Key":"Id","Value":1},{"Key":"Name","Value":"Badass Boots"},{"Key":"Brand","Value":"Nike"},{"Key":"Description","Value":"Super cool boots that can make you fly (Not Really!)."}, etc...]]

Script File:

function ProductListViewModel() {
    // Data
    var self = this;
    self.Products = ko.observableArray([]);

    $.getJSON("/Home/GetProducts", function (data) {
        self.Products(data);
    });
}

JavaScript error on running the application:

Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: Name Message: Name is not defined

Screen Shot 1:

enter image description here

Screen Shot 2:

enter image description here

I get this error message: Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: Name Message: Name is not defined — Ibrahim Ahmed, Sep 29 '13 at 13:40

score 2 · Accepted Answer · answered Sep 29 '13 at 17:00

An ExpandoObject generally speaking is for all intents and purposes, a dictionary. When serialized as JSON here, it is treated as a dictionary and becomes a collection of key/value pairs (not all serializers behave this way, but the one you're using does). It is not an object you can access members by name, you'll have to convert it into a representation where you can (or serialize it as one in the first place).

Doing the conversion is not the worst thing in the world:

function Product(item) {
    var self = this;
    // assuming item is an array of key/value pairs
    ko.utils.arrayForEach(item, function(pair) {
        // doesn't necessarily have to be mapped as an observable
        self[pair.Key] = ko.observable(pair.Value);
    });
}

With this, you can then map the results to your array of products:

$.getJSON("/Home/GetProducts", function (data) {
    self.Products(ko.utils.arrayMap(data, function(item) {
        return new Product(item);
    }));
});

I don't know how serialization works in ASP.net or if it's even configurable. But I generally use [Json.NET](http://james.newtonking.com/json) for all my JSON needs and it serializes dictionaries as objects and not as the naive collection of key/value pairs. Perhaps you could use Json.NET here... I just don't know how to set that up. — Jeff Mercado, Sep 29 '13 at 17:09

officert · Answer 2 · 2013-09-29T16:32:02.790

1

It looks like the problem is because you are trying to set the value of your ko.observableArray to a json array. Not sure that this will work. Typically this is how I would do it:

function ProductListViewModel() {
   // Data
   var self = this;
   self.Products = ko.observableArray([]);

   $.getJSON("/Home/GetProducts", function (data) {
       ko.utils.arrayForEach(data, function(item) {
           self.Products.push({
               Name : item.Name
           });
       });
   });

}

Use knockout's arrayForEach function to iterate through your json array, and push each object into your observableArray.

edited Sep 29 '13 at 16:32

answered Sep 29 '13 at 13:56

officert

1,232
9
12

I did that and i also getUncaught ReferenceError: Unable to parse bindings. Bindings value: text: Name Message: Name is not defined – Ibrahim Ahmed Sep 29 '13 at 14:09
could you post what the Products c# class is. Looking at the JSON you are getting back from the server, something does not look quite right. You have an array within an array, and each of your Product classes properties are objects, which doesn't seem right. I would think your Product would look more like this : { 'Id' : '1', 'Name' : 'BadAss Boots' }. Each Product in your collection is one Json object with some properties. – officert Sep 29 '13 at 16:37

score 0 · Answer 3 · answered Sep 29 '13 at 13:44

As in your JSON I see the sequence of Key and Value, so you have to specify the filed name which knockout has to query for to get the relative value and put it on the screen.

So change <strong data-bind="text: Name"> to <strong data-bind="text: Key"> and this should work for you.

How to use IEnumerable in knockout.js?

3 Answers3