knockout.js foreach binding: property value to array of column names

Question

I have a question about Knockout foreach binding to a table.

I have an array of columnNames and an array of items.

The items array has a property called ColumnName. How would I use knockout foreach to bind self.items to self.columnNames?

My view model looks like this:

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': 25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

In my view, I'm guessing I need something like this,

<table>
    <thead>
        <tr data-bind="foreach: columnNames">
            <th> <span data-bind="text: $data"></span>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr data-bind="foreach: $parent.columnNames">
            <!-- how do I put the Value property here?! -->
        </tr>
    </tbody>
</table>

I started a jsfiddle here, http://jsfiddle.net/83zcwue7/1/

-update- I'm trying to render something like this:

Name    Age     Job
John    25
Jane    26      Developer

-- update 2 -- I created an ugly (but working) solution.

http://jsfiddle.net/83zcwue7/7/

I added this method call. It maps the ColumnName as the property name and Value its value, but it feels like I completely missed a simpler solution:

    self.fixedItems = ko.observableArray();   //I use this in foreach

    self.fixData = function(){
        $.each(self.items(), function(i, rows){
            var cell = new Object();
            $.each(rows, function(j, prop){
                cell[prop.ColumnName] = prop.Value;

            });
            self.fixedItems.push( cell );
        });
   };

Original data looked like this:

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

The result (self.fixedItems) looks like this:

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

Which 'fixes' the data, so it can be used easily in the foreach. It feels like I missed an elegant solution.

humm couple of mistakes check this jsfiddle.net/83zcwue7/2 . hope it helps — super cool
Thank you. Unfortunately, I get a new array per row, each array element holds a single column of data. — Timmy Elliot
wow, that's a very difficult model to work with. How do you know that the object containing column name "job" with value "developer" is related to the object containing the column name "name" with the value "jane"? — Anish Patel
yeah, it a legacy solution allowing for user-defined columns. I know the object containing column name "job" with value "developer" is related to the object containing the column name "name" with the value "jane", because they are in the same array: . [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }] — Timmy Elliot
IMHO there isn't simpler solution for this your fix look like the way to go as there is a chance data coming in (dynamic) you can use subscribe check this jsfiddle.net/83zcwue7/8 . good luck — super cool

Fabio Luz Fabio Luz · Accepted Answer · 2015-07-02T05:30:42

The name of the items' properties must be the same of the columnNames. Then you can access the property of the items. Like this:

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items([
    {
        'Name': 'Jonn',
        'Age': '10',
        'Job': 'Developer'
    },
    {
        'Name': 'Jonn',
        'Age': '25',
        'Job': 'Developer'
    }
    ]
);

HTML

<table>
    <thead>
        <tr data-bind="foreach: columnNames">
            <th> <span data-bind="text: $data"></span>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr data-bind="foreach: $root.columnNames">
            <td data-bind="text: $parent[$data]"></td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/83zcwue7/3/

Edit

A clear solution using only knockout functions and computed observables:

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];

    self.fixedItems = ko.computed(function () {
        return ko.utils.arrayMap(self.items(), function (item) {
            var fixedItem = {};
            ko.utils.arrayForEach(item, function(column) {
                fixedItem[column.ColumnName] = column.Value;
            });
            return fixedItem;
        });
    });
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': '25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

http://jsfiddle.net/83zcwue7/9/

It is cleaner, isn't it?

knockout.js foreach binding: property value to array of column names

3 Answers