Question

I’m having some problems with the knockout’s foreach binding while listing virtual elements properties on a grid.

Although the web api returns the JSON data as expected, knockout is not showing the virtual elements properties properly.

My UI displays a list of Products, and one of its collumns is the ProductCategory.Name. For some reason it only displays the first appearance of each Product Category.

Name        Category

Pr01        Cat01
Pr02        
Pr03        Cat02
Pr04        Cat03
Pr05        

The 2nd and 5th products are also products of the “Cat01” Category. But for some reason, it is not displayed for them.

I have the following model:

public class Product
{
    [ScaffoldColumn(false)]
    public int ProductId { get; set; }

    public string Name { get; set; }
    public int ProductsCategoryId { get; set; }

    public virtual ProductsCategory ProductCategory { get; set; }
}

public class ProductsCategory
{
    public int ProductsCategoryId { get; set; }

    public string Name { get; set; }
}

This is how I’m binding the grid:

<tbody data-bind="foreach: products">
    <tr>            
        <td class="left" data-bind="text: $data.Name"></td>
        <td class="left" data-bind="text: $data.ProductCategory.Name"></td>
    </tr>
</tbody>

And this is the JSON:

[{
    "$id": "1",
    "ProductCategory": {
        "$id": "2",
        "ProductsCategoryId": 1,
        "Reference": "OSOL                            ",
        "Name": "Óculos de Sol",
        "ProductsCategoryStatusId": 1
    },
    "ProductId": 3,
    "Reference": "HTHTOD                          ",
    "BarCode": "2122071530085                   ",
    "Name": "Thin Hard Trivex OD",
    "Description": null,
    "ProductsBrandId": 1,
    "ProductsCategoryId": 1,
    "ProductsSupplierId": 1,
    "ProductStatusId": 1
}, {
    "$id": "3",
    "ProductCategory": {
        "$ref": "2"
    },
    "ProductId": 4,
    "Reference": "HTHTOE                          ",
    "BarCode": "2122071531163                   ",
    "Name": "Thin Hard Trivex OE",
    "Description": "null",
    "ProductsBrandId": 1,
    "ProductsCategoryId": 1,
    "ProductsSupplierId": 1,
    "ProductStatusId": 1
}, {
    "$id": "4",
    "ProductCategory": {
        "$id": "5",
        "ProductsCategoryId": 2,
        "Reference": "OGRAU                           ",
        "Name": "Óculos de Grau",
        "ProductsCategoryStatusId": 1
    },
    "ProductId": 10,
    "Reference": "HTHTOX                          ",
    "BarCode": "2123180206342                   ",
    "Name": "Thin Hard Trivex OX",
    "Description": null,
    "ProductsBrandId": 2,
    "ProductsCategoryId": 2,
    "ProductsSupplierId": 1,
    "ProductStatusId": 1
}, {
    "$id": "6",
    "ProductCategory": {
        "$id": "7",
        "ProductsCategoryId": 3,
        "Reference": "LNTS                            ",
        "Name": "Lentes",
        "ProductsCategoryStatusId": 1
    },
    "ProductId": 16,
    "Reference": "HTHTOY                          ",
    "BarCode": "2123192208431                   ",
    "Name": "Thin Hard Trivex OY",
    "Description": null,
    "ProductsBrandId": 4,
    "ProductsCategoryId": 3,
    "ProductsSupplierId": 1,
    "ProductStatusId": 1
}, {
    "$id": "8",
    "ProductCategory": {
        "$ref": "2"
    },
    "ProductId": 12,
    "Reference": "HTHTOZ                          ",
    "BarCode": "2123192059538                   ",
    "Name": "Thin Hard Trivex OZ",
    "Description": null,
    "ProductsBrandId": 1,
    "ProductsCategoryId": 1,
    "ProductsSupplierId": 1,
    "ProductStatusId": 1
}]

As you can see, the ProductsCategory data appears once, then it is referenced by the next products in the same category.

Any suggestions of how I can fix this to show the category name for all the elements on the grid?

Answer 1

Your json is in a format that knockout doesn’t understand. The product categories are only being transmitted one time, the second time a product category is transmitted it contains a “reference” to the first.

See the object with id:3 as below (an example of what is wrong).

"$id":"3",
"ProductCategory":{"$ref":"2"}

Verses the below which is correct.

"$id":"1",
"ProductCategory":{"$id":"2","ProductsCategoryId":1,"Reference":"OSOL ","Name":"Óculos de Sol","ProductsCategoryStatusId":1}

Update: How to deal with the above non standard json.

I took a look at the example project. It has the following in \ProductStore\App_Start\WebApiConfig.cs

var json = config.Formatters.JsonFormatter;
            json.SerializerSettings.PreserveReferencesHandling =
                Newtonsoft.Json.PreserveReferencesHandling.Objects;

According to this, http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization, preserving object references produces non standard json which isn’t consumable by most clients.

To get standard json which will allow knockout to work.

var json = config.Formatters.JsonFormatter;
            json.SerializerSettings.PreserveReferencesHandling =
                Newtonsoft.Json.PreserveReferencesHandling.None;  //this needs to be None