Trying to data-bind object array using knockout.js into table

Question

I have an object array in the following format, with name, status and the Cells.Cells hold background color.

Result =
    {
    "Name" : "Check",
    "Status" : 0,
    "Cells" : [#A9A9F5,#8181F7,#8258FA,#8258FA,#8258FA] ,

    "Name" : "Test",
    "Status" : 1,
    "Cells" : [#8181F7,#8258FA,#8181F7,#8258FA,#8258FA] 
}

I am using knockout to bind them and display the result in the table. My desired output would be to get the following result in a table. The cell color would be the background color of the cell.

   Check|0|[Cell Color1]|[Cell Color2]|[Cell Color3]|[Cell Color4]|[Cell Color5]
    Test|1|[Cell Color1]|[Cell Color2]|[Cell Color3]|[Cell Color4]|[Cell Color5]

What I have so far is

            <table border="1">
            <tbody data-bind="foreach: Result">
                <tr>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: Status"></td>
                    <td data-bind="foreach: Cells">
                     <td data-bind="style: {'background-color':Cells}"></td></td>

                </tr>
            </tbody>

        </table>

I am getting the following result

Check|0|
Test|1|

But not the cells with the respective background color. How can I access the objects inside 'Cell' and have them generate its own cell with the respective background color? Thanks

<td> inside <td> thats not a valid case , you try using $data in foreach in place of cells — super cool
– super cool, Commented Oct 20, 2015 at 12:55

Alexander Taran · Accepted Answer · 2015-10-20 12:58:37Z

2

You can access the current iteration of foreach binding with $data variable. also you might want to replace

<td data-bind="foreach: Cells">

with

<!-- ko foreach: Cells -->
 <td data-bind="style:{'background-color':$data}></td>
<!-- /ko -->

because as @super cool noted in comments - td inside td is not valid

answered Oct 20, 2015 at 12:58

Alexander Taran

6,7252 gold badges42 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Trying to data-bind object array using knockout.js into table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related